js monitoring form value modification synchronization problem, cross-browser support_form special effects

The function you want to achieve is roughly as follows:
There are two text boxes, one of which is read-only and the other can be input. When you are required to enter text in an input text box, the read-only text box can obtain the entered value, and a prompt message appears next to the read-only text box, displaying the content of the read-only text box in real time.
This function seems simple, but it is not as simple as imagined. (Note that there is nothing to discuss about the processing of the input box, the key is the processing of the read-only box)

At the beginning, we usually think of using the onchange event on the read-only text box. After trying it, I found that onchange is useless at all. This event is triggered after the text box gains focus and then the content changes and loses focus. Now there is no such thing at all on the read-only text box, and its content is changed through js. Therefore, another method needs to be found.

At this time, the onpropertychange event was found online. This event is triggered when the text box property changes, no matter how it is changed. Note that the properties change, not just the value. After giving it a try, it really works. However, this event is exclusive to IE. In WEB development, browser compatibility issues must be considered. So I continued to explore...

I saw another event on the Internet: oninput. It's everywhere on the Internet: this event in fireFox is equivalent to the onpropertychange event in IE. However, when I tried it, I found that it was not the same at all. The oninput event doesn't seem to work in fireFox. After a period of testing, I finally realized that oninput is not the same as onpropertychange (it was reposted everywhere on the Internet without serious testing). oninput is only triggered when the user input value changes (i.e. value changes), not when all attributes change. Moreover, oninput will not trigger when the value is changed through js. Now I am depressed. After finally seeing some hope, I fell into disappointment again. Fortunately, I didn't despair... Hey, the browser compatibility issue is really troublesome.

Thinking about it, something comes up. For browsers such as fireFox, you can use a timer to check whether the content of the read-only text box has changed. After testing, it was finally done. Post the code below to share with everyone.

Effect in IE:

Rendering in FireFox:

In addition, I also tested it successfully on Google Chrome (the same as fireFox).

HTML code:

Copy code The code is as follows:

                                                                         ​ UserName" type="text" name="jsUserName" readonly/>
            < ;td> >

JavaScript code:





Copy code
The code is as follows:

$(function()
                                                                                          >          $(" #userName").get(0).onpropertychange = setJsUserName;
                                             🎜> {
var intervalName; // Timer handle
$("#userName").get(0).addEventListener("input",setJsUserName,false);

//When getting focus , start the timer                   // Clear the timer when focus is lost Object
$("#userName").blur(function()
{
clearInterval(intervalName);
}); 🎜>                                                                                                                                                                                                                                                      . The value of
function setJsUserName()
{
$("#jsUserName").val($(this).val()); 🎜>                     // jsUserName input Function handle()
that is executed when the value changes.
                                                                                                                                                                             $("#jsUserName"). parent().append("Seeing the information here shows that changing the input value through js can also respond to the corresponding event: " $("#jsUserName").val() "");
                                                                                                                                              
Note: For convenience, the js code uses jQuery. It's the same thing if you don't use it.
In addition, considering performance issues, you can consider when to start the timer, clear the timer and the timer delay time.
Summary:
1. The difference between the onchange event and the onpropertychange event:
The onchange event is triggered when the content changes (the two contents may still be equal) and loses focus; the onpropertychange event is triggered in real time, that is This event will be triggered every time a character is added or deleted. This event will also be triggered by js changes, but this event is exclusive to IE.
2. The difference between the oninput event and the onpropertychange event:
The oninput event is an event supported by most browsers except IE. It is triggered when the value changes, in real time, that is, it is triggered every time a character is added or deleted. , however, it will not be triggered when the value is changed through js; the onpropertychange event is triggered by any property change, but oninput is only triggered when the value changes. Oninput must be registered through addEventListener(), and the onpropertychange registration method is the same as a normal event. (Here all refers to dynamic binding of events in js to achieve separation of content and behavior)
3. Situations when oninput and onpropertychange fail:
(1) oninput event: a). When the value is changed in the script will not be triggered; b). will not be triggered when selecting from the browser's automatic drop-down prompt.
(2) onpropertychange event: When input is set to disable=true, onpropertychange will not be triggered.
If you have any questions or if what I wrote is incorrect, please feel free to contact me or make corrections.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript simulates user click event_javascript skillsNext article：JavaScript simulates user click event_javascript skills

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved