Home > Developer > Web Develop
Someone needs to trigger the event function when the time control assigns a value to the text box. The effect of the implementation:
1, text Box support manual input, through the user input modified value, manual input after the end of the trigger Event. Blocking is triggered when the focus is lost (no event is triggered during the Input)
2, Modify the value through the JS method, modify the trigger Event. The key block is this (js assignment to Trigger)
Final Adoption Scenario:
1, IE (IE8 and Below) using Onpropertychange to implement JS assignment after triggering the event
2, the demand is the manual input after the end of the event, to avoid the text box in real-time input text when the Onpropertychange trigger event, before trriger to determine the current focus Position. This onpropertychange the manual input is invalid;
3. To trigger an event after manual input is completed, use the onchange event
1. Other browsers can also use the onchange analog input to trigger events, but cannot use the Onpropertychange Event. Using the timer simulation effect
<!DOCTYPE HTML> <HTML> <Head><Metahttp-equiv= "content-type"; content= "text/html; charset=utf-8"> <Scripttype= "text/javascript"src= "jquery-1.9.1.min.js"CharSet= "utf-8"></Script><Script>functionInit () {//Each click gives a different value varI=0; $("#testchange"). on ("Click",function(){ $("#name"). Val (i); I++; }); varjsdate= ""; if(document.all) {//IE8 and below $("#name"). on (" change",function() {console.log (i);//code to trigger after changing the value }); $('input[type= "text"]'). each (function() { var that= this; if( this. Attachevent) { this. attachevent ('Onpropertychange',function(e) {if($("#name"). is (": Focus")) return; if(e.propertyname!='value') return; Debugger; $ (that). Trigger (' change'); }); } }) } Else {//non ie and IE9 above varintervalname; Intervalname=setinterval (handle, -); functionhandle () {if($("#name"). Val ()!=jsdate&& !$("#name"). is (": Focus")){//trigger when analog loses focusjsdate= $("#name"). Val (); Console.log (i+ "Oninput");//code to trigger after changing the value } }; }}</Script></Head> <Bodyonload= "init ();"> <ButtonID= "testchange">JS Assign Value</Button> <label>Text box:</label><inputtype= "text"ID= "name"/></Body> </HTML>
Summary comparison of onchange, oninput, onpropertychange in input tags
Onchange: old stuff, basically compatible with all Browsers. The implementation principle starts listening for value after the element has been focused, and the value before and after the element loses focus is triggered when value is not equal.
Scenario where the event is triggered when the input loses focus
Note: in the process of checking the information to see some place said onchange in Non-IE8 browser will listen to text changes in real-time, but I found in the actual test and no real-time monitoring, there is a problem in the wrong goods please Advise:-D
or a jquery pot? I tested the code for $ ("#id"). on ("change", function ());
Standard label for oninput:html5. The implementation mechanism for real-time monitoring text box changes, There is a change in the trigger event, this effect in the Chinese input method is very strange, specific time to study Later.
The application scenario is: the text box input process in real-time listening input content, triggering events
Element-specific attributes in the onpropertychange:ie, which are directly at the bottom of the Listener Element's property changes (more than value), any change will trigger the event, including the applicable JS operation
The application scenario Is: real-time Monitoring element property changes during the page operation , triggering events, especially for the scene of JS operation triggering event in IE
Reference:
A brief discussion on Change,propertychange,input events
Http://www.cnblogs.com/AndyWithPassion/archive/2011/12/18/change_propertychange_input.html
Using Onpropertychange,oninput events in JavaScript development to resolve onchange events
Http://www.jb51.net/article/25275.htm
Summarize the usage and difference of oninput, onchange and Onpropertychange events
http://blog.csdn.net/freshlover/article/details/39050609
The perfect solution for real-time monitoring of changes in input box values: Oninput & Onpropertychange
Http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
"integrated" input Tag JS change Value event handling method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
