Today, my colleague found a small bug in the project and I am responsible for solving it. I was a little excited after studying it for a short time. Haha. Share it with you. 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. Below I will post the code to share with you.
Effect in IE:
In FireFox:
In addition, I also succeeded in google Chrome testing (the same as fireFox ).
HTML code:
The Code is as follows:
| The value here is set through js: |
|
| Enter the value here: |
|
JavaScript code:
The 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 ()
{
// IE browser does not make any sense here, but it does so for unification and extraction of public code.
If ($ ("# jsUserName"). val ()! = JsUserName)
{
$ ("# ToolTip"). remove ();
$ ("# JsUserName "). parent (). append ("the information here indicates that the corresponding event can also be returned when the input value is changed through js:" + $ ("# jsUserName "). val () + "");
JsUserName = $ ("# jsUserName"). val ();
}
}
});
Note: jQuery is used for js Code for convenience. It is the same if not used.
In addition, considering the performance, you can consider when to start the timer, clear the timer, and the timer delay time.
Summary:
1. Differences between onchange events and onpropertychange events:
The onchange event is triggered when the content changes (the content may be equal twice) and the focus is lost. The onpropertychange event is triggered in real time, that is, each addition or deletion of a character is triggered, js changes will also trigger this event, but this event is private to IE.
2. Differences between oninput events and onpropertychange events:
Oninput events are events supported by most browsers except IE. They are triggered when the value is changed. They are real-time, that is, triggered every time a character is added or deleted. However, when the value is changed through js, but the onpropertychange event will not be triggered. The onpropertychange event 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. Failure of oninput and onpropertychange:
(1) oninput event: a). It will not be triggered when the value is changed in the script; B). It will not be triggered when it is selected from the browser's automatic drop-down prompt.
(2) onpropertychange event: when the input is set to disable = true, onpropertychange will not be triggered.
If you have any questions or are not correct, contact or correct me.
