Explication détaillée des événements déclenchés par des modifications du contenu des balises d'entrée (avec exemples)

Cet article vous apporte une explication détaillée des événements déclenchés par les modifications du contenu de la balise d'entrée (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Méthode native

événement onchange

<input type="text" onchange="onc(this)">

function onc(data){
    console.log(data.value);
}

L'événement onchange est déclenché lorsque le contenu change et perd le focus. Autrement dit, si le focus est perdu et que le contenu ne change pas, il ne sera pas déclenché. Si le contenu change mais que le focus n'est pas perdu, il ne sera pas déclenché en temps réel.
js ne se déclenche pas lorsque la valeur est modifiée directement

événement oninput

<input id="inp" type="text" oninput="inp(this)">

function inp(data) {
    console.log(data.value)
}

l'événement oninput est déclenché en temps réel lorsque le contenu d'entrée changements. L'événement oninput est un événement pris en charge par la plupart des navigateurs à l'exception d'IE, et est déclenché en temps réel lorsque la valeur change.
Il n'est pas déclenché lorsque js modifie directement la valeur.

Événement onpropertychange

L'événement onpropertychange est déclenché en temps réel Il sera déclenché à chaque fois qu'un personnage est ajouté ou supprimé. Cet événement sera également déclenché par les modifications de js, mais cela. l'événement est exclusif à IE.
Lorsque l'entrée est définie sur Disable=true, elle ne sera pas déclenchée.

La différence entre l'événement oninput et l'événement onpropertychange :

l'événement onpropertychange est déclenché par tout changement de propriété, tandis que oninput n'est déclenché que lorsque la valeur Oninput doit être enregistrée via addEventListener(). , la méthode d'inscription onpropertychange est la même que celle de l'événement général.

Oninput est utilisé en combinaison avec onpropertychange

Oninput est un événement standard de HTML5. Il est utilisé pour détecter les modifications de contenu des éléments textarea, input:text, input:password et input:search. l'interface utilisateur. Très utile, il se déclenche immédiatement après la modification du contenu, contrairement à l'événement onchange qui doit perdre le focus avant d'être déclenché. L'événement oninput n'est pas pris en charge dans les versions inférieures à IE9. Vous devez plutôt utiliser l'événement onpropertychange unique d'IE. Cet événement sera déclenché lorsque l'interface utilisateur change ou lorsque le contenu est directement modifié à l'aide d'un script. >

Modification L'état sélectionné de l'élément input:checkbox ou input:radio est modifié et l'attribut vérifié change.

La valeur de l'élément input:text ou textarea est modifiée et l'attribut value change.
L'élément sélectionné de l'élément select a été modifié et l'attribut selectedIndex a changé.
Après avoir écouté l'événement onpropertychange, vous pouvez utiliser l'attribut propertyName de l'événement pour obtenir le nom de la propriété modifié.

L'exemple de code qui collecte oninput & onpropertychange pour surveiller les modifications du contenu de la zone de saisie est le suivant :

// Firefox, Google Chrome, Opera, Safari, Internet Explorer à partir de la version 9

function OnInput (event) {
    alert ("The new content: " + event.target.value);
}

// Internet Explorer

function OnPropChanged (event) {
    if (event.propertyName.toLowerCase () == "value") {
        alert ("The new content: " + event.srcElement.value);
    }
}

<input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

L'utilisation de jQuery

n'a besoin que de lier les événements oninput et onpropertychange en même temps. L'exemple de code est le suivant :

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

La dernière chose à noter est que les deux événements oninput et onpropertychange ont un petit bug dans IE9, c'est-à-dire qu'ils ne seront pas déclenchés lors de la suppression de contenu via les commandes couper et supprimer du menu contextuel, tandis que les autres versions d'IE sont normales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!