jQuery .val change ne change pas la valeur de l'entrée

Question

J'ai une entrée HTML avec un lien dans la valeur.

<input type = 'text' value = 'http://www.link.com' id = 'link' />

J'utilise jQuery pour changer la valeur sur un certain événement.

$('#link').val('new value');

Le code ci-dessus change la valeur de la zone de texte mais ne change pas la valeur dans le code (valeur = 'http://www.link.com' reste inchangée). J'ai besoin que la valeur = '' change également.

Answer 1

Utilisez attr à la place.
$('#link').attr('value', 'new value');

Démo

Answer 2

La modification de la propriété valeur ne change pas la defaultValue . Dans le code (récupéré avec .html() o innerHTML ), l'attribut de valeur contiendra le defaultValue et non la propriété de la valeur.

Answer 3

Pour développer un peu la réponse de Ricardo : https://stackoverflow.com/a/11873775/7672426

http://api.jquery.com/val/#val2

à propos de val()

La définition de valeurs à l'aide de cette méthode (ou à l'aide de la propriété native value) ne provoque pas l'envoi de l'événement de modification. Pour cette raison, les gestionnaires d'événements correspondants ne seront pas exécutés. Si vous souhaitez les exécuter, vous devez appeler .trigger( "change" ) après avoir défini la valeur.

Answer 4

Pour moi, le problème était que la modification de la valeur de ce champ ne fonctionnait pas :

$('#cardNumber').val(maskNumber);

Aucune des solutions ci-dessus n'a fonctionné pour moi, alors j'ai cherché plus loin et j'ai trouvé :

Selon la spécification d'événement DOM Level 2 : L'événement de changement se produit lorsqu'un contrôle perd le focus d'entrée et que sa valeur a été modifiée depuis qu'il a obtenu le focus. Cela signifie que l'événement change est conçu pour se déclencher en cas de modification par l'interaction de l'utilisateur. Les changements programmatiques ne provoquent pas le déclenchement de cet événement.

La solution a été d'ajouter la fonction de déclenchement et de faire en sorte qu'elle déclenche un événement de changement comme ceci :

$('#cardNumber').val(maskNumber).trigger('change');

Answer 5

$('#link').prop('value', 'new value');

Explication : Attr fonctionne avec jQuery 1.6 mais à partir de jQuery 1.6.1 les choses ont changé. Dans la majorité des cas, prop() fait ce que attr() faisait auparavant. Remplacer les appels à attr() par prop() dans votre code fonctionnera généralement. Attr vous donnera la valeur de l'élément tel qu'il a été défini dans le html au chargement de la page et prop donne les valeurs mises à jour des éléments qui sont modifiés via jQuery.