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

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

高洛峰
高洛峰Original
2017-02-03 14:05:082210Durchsuche

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)" />

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"/>

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"/>

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:

bece445d937c1812c70421ae00b60816

Instanz 2:

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

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);
}

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!

Stellungnahme:
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