Heim > Web-Frontend > js-Tutorial > Beispiel für die Überwachung von Echtzeitänderungen im Eingabefeldwert durch js

Beispiel für die Überwachung von Echtzeitänderungen im Eingabefeldwert durch js

高洛峰
Freigeben: 2017-02-03 14:05:08
Original
2236 Leute haben es durchsucht

1. Oninput- und Onporpertychanger-Ereignisse gleichzeitig an das Element binden

Beispiel:

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

2 js zum Hinzufügen von „Auf Ereignisse warten“

<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"/>
Nach dem Login kopieren

3. Verwenden Sie die jQuery-Methode, um Ereignisse zu binden

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

Nachdem Sie das onpropertychange-Ereignis abgehört haben, können Sie das propertyName-Attribut des Ereignisses verwenden, um den geänderten Eigenschaftsnamen event.propertyName abzurufen

Instanz 1:

Instanz 2:

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

Instanz 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);
}
Nach dem Login kopieren

Das obige Beispiel für die Überwachung der Echtzeitänderung des Eingabefeldwerts durch js ist der gesamte Inhalt, den der Editor Ihnen geben kann eine Referenz, und ich hoffe, dass Sie sie unterstützen werden.

Weitere Beispiele für die JS-Überwachung von Echtzeitänderungen in Eingabefeldwerten finden Sie auf der chinesischen PHP-Website für verwandte Artikel!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage