Example of js monitoring real-time changes in input input box value-JS Tutorial-php.cn

1. Bind oninput and onporpertychanger events to the element at the same time

Example:

Copy after login

2. Use native js to add listening events

Copy after login

3. Use the jQuery method to bind events

Copy after login

After listening to onpropertychange After the event, you can use the event's propertyName attribute to get the changed property name, event.propertyName

Instance 1:

Example 2:

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

Copy after login

Example 3:

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

Copy after login

The above example of js monitoring the real-time change of the input input box value is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more js monitoring real-time changes in the input input box value and related articles, please pay attention to the PHP Chinese website!