Cross-browser support for modification and synchronization of JS listening form values

The functions you want to implement are like this:
There are two text boxes, one of which is read-only and the other can be input. When you can enter text in a text box, the read-only text box can obtain the entered value, and a prompt message is displayed next to the read-only text box to display the content of the read-only text box in real time.
This function is simple, but it is not as simple as you think. (Note: There is nothing to discuss about the processing of the input box. The key is to process the read-only box)

At the beginning, we generally think of using the onchange event in the read-only text box. I tried to find that onchange is useless. This event is triggered only when the focus is obtained in the text box and the content change loses the focus. Currently, this event is not found in the read-only text box, its content is changed through Js. Therefore, you need to find another method.

At this time, the onpropertychange event is found online. This event is triggered when the text box attribute is changed, no matter how it is changed. Note that the attribute is changed, not just the value. A try. However, this event is proprietary to IE. For web development, browser compatibility must be considered. So I continued to explore ......

You can see another event oninput on the Internet. Everywhere on the Internet: the event in Firefox is the same as the onpropertychange event in IE. However, when I tried it, I found that it was not the same. The oninput event does not seem to work in Firefox. After a period of testing, I finally realized that the oninput is not the same as the onpropertychange (it is not carefully tested because it is everywhere on the Internet ). Oninput is triggered only when the user's input value changes (that is, the value changes), not when all attributes change, and oninput is not triggered when the value is changed through Js. This is depressing. It was hard to see some hope, and again fell into disappointment. Fortunately, there was no despair ...... Ah, browser compatibility is really troublesome.

There is always a new eye. For Firefox and other browsers, you can use the timer to check whether the content of the read-only text box has changed. After the test, we finally achieved success. NextCodePost it to share with you.

Effect in IE:

In Firefox:

In addition, I also succeeded in Google Chrome testing (the same as Firefox ).

HTML code:

Copy code The Code is as follows: <Table>
<Tr>
<TD> set the value here through JS: </TD>
<TD> <input id = "jsusername" type = "text" name = "jsusername" readonly/> </TD>
</Tr>
<Tr>
<TD> enter a value here: </TD>
<TD> <input id = "username" type = "text" name = "username"/> </TD>
</Tr>
</Table>

JavaScript code: Copy codeThe Code is as follows: $ (function ()
{
VaR jsusername = "";
If ($. browser. MSIE) // IE browser
{
$ ("# Username"). Get (0). onpropertychange = setjsusername;
$ ("# Jsusername"). Get (0). onpropertychange = handle;
}
Else // other browsers
{
VaR intervalname; // timer handle
$ ("# Username"). Get (0). addeventlistener ("input", setjsusername, false );

// Start the timer when getting the focus
$ ("# Username"). Focus (function (){
Intervalname = setinterval (handle, 1000 );
});
// When the focus is lost, the timer is cleared.
$ ("# Username"). Blur (function ()
{
Clearinterval (intervalname );
});
}

// Set the value of jsusername Input
Function setjsusername ()
{
$ ("# Jsusername"). Val ($ (this). Val ());
}

// The function executed when the value of jsusername input is changed
function handle ()
{< br> // IE browser makes no sense here, but this is done to unify and extract public code.
if ($ ("# jsusername"). Val ()! = Jsusername)
{< BR >$ ("# tooltip "). remove ();
$ ("# jsusername "). parent (). append (" the information here indicates that the corresponding event can be returned when the input value is changed through JS: " + $ ("# jsusername "). val () + "");
jsusername = $ ("# jsusername "). val ();
}< BR >});

Note: jquery is used in JS Code for convenience. It is the same if not used.
In addition, considering performance issues, you can consider when to start the timer, clear the timer, and the timer delay time.
conclusion:
1. Differences between the onchange event and the onpropertychange event:
the onchange event changes the content (the content may be equal twice) the event is triggered when the focus is lost. The onpropertychange event is triggered in real time, that is, it is triggered every time a character is added or deleted. The event is also triggered by JS changes, but this event is private to IE.
2. Differences between the oninput event and the onpropertychange event:
the oninput event is supported by most browsers outside of IE. It is triggered in real time when the value is changed, that is, each addition or deletion of a character is triggered. However, when the value is changed through JS, The onpropertychange event is triggered by any attribute change, oninput is triggered only when the value is changed. oninput must be registered through addeventlistener (). onpropertychange registration is the same as normal events. (Events are dynamically bound in JS to separate content from behavior.)
3. events with oninput and onpropertychange are invalid:
(1) oninput events: a ). it is not triggered when the value is changed in the script; B ). it is not triggered when it is selected from the browser's automatic drop-down prompt.
(2) onpropertychange event: When input is set to disable = true, onpropertychange is not triggered.
if you have any questions or are incorrect, contact us or correct us.