Exemple de js surveillant les changements en temps réel dans la valeur de la zone de saisie-js tutoriel-php.cn

Exemple de js surveillant les changements en temps réel dans la valeur de la zone de saisie

高洛峰

Libérer： 2017-02-03 14:05:08

original

2206 Les gens l'ont consulté

1. Liez les événements oninput et onporpertychanger à l'élément en même temps

Exemple :

<script type="text/JavaScript">
function aa(e){alert("inputting!!");}
</script>
 
<input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)" />

Copier après la connexion

2. js pour ajouter Écouter les événements

<script type="text/javascript">
 $(function(){
if("\v"=="v"){//true为IE浏览器，感兴趣的同学可以去搜下，据说是现有最流行的判断浏览器的方法
document.getElementById("a").attachEvent("onporpertychange",function(e){
console.log("inputting!!");
}
}else{
document.getElementById("a").addEventListener("onporpertychange",function(e){
console.log("inputting!!");
}
}
});
</script>
<input type="text" id="a"/>

Copier après la connexion

3. Utilisez la méthode jQuery pour lier les événements

<script type="text/javascript">
 $(function(){
$("#a").bind(&#39;input porpertychange&#39;,function(){
console.log("e");
});
});
</script>
<input type="text" id="a"/>

Copier après la connexion

Après avoir écouté l'événement onpropertychange, vous pouvez utiliser l'attribut propertyName de l'événement pour obtenir le nom de propriété modifié, event.propertyName

Instance 1 :

Instance 2 :

$("#name").bind(&#39;input porpertychange&#39;,function(){
    var thisTxt=$("#name").val();
    $(this).siblings("p").html(thisTxt)
  })

Copier après la connexion

Instance 3 :

//手机号码分段显示
register.phonePropertychange = function() {
  _this = register;
  _input = $(this);
  var v = $(this).val();
  v = v.replace(new RegExp(/ /g),&#39;&#39;);
  var v1 = v.slice(0,3);
  var v2 = v.slice(3,7);
  var v3 = v.slice(7,11);
  if(v2==&#39;&#39;){
    _input.focus().val(v1);
  }else if(v3==&#39;&#39;){
    _input.focus().val(v1+&#39; &#39;+v2);
  }else{
    _input.focus().val(v1+&#39; &#39;+v2+ &#39; &#39;+v3);
  };
  
  //手机号输入完成字体颜色改变
  if (v.length === 11) {
    if(_this.regexpPhone(v)){
      _input.css(&#39;color&#39;,&#39;#000&#39;);
      $(&#39;#btnSendCode&#39;).addClass(&#39;c-26a949&#39;);
      _input.blur();;
    }else{
      layer.open({content: &#39;手机号码不正确，请重新输入&#39;,time: 2, end:function(){
        _input.val(&#39;&#39;);
      }});
    }
  }else{
    _input.css(&#39;color&#39;,&#39;#26a949&#39;);
  }
}
 
//验证手机号
register.regexpPhone = function(phone){
  return /^1[3|4|5|7|8]\d{9}$/.test(phone);
}

Copier après la connexion

L'exemple ci-dessus de js surveillant le changement en temps réel de la valeur de la zone de saisie est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous le donner. une référence, et j'espère que vous le soutiendrez sur le site Web chinois PHP.

Pour plus de js surveillant les changements en temps réel dans la valeur de la zone de saisie et les articles connexes, veuillez faire attention au site Web PHP chinois !