A brief analysis of adding listener events when value changes in html input

The effect to be achieved
In many cases, we will monitor the changes in the input box value in real time so that we can take immediate actions to guide the browser to enhance the user experience of the website. For example, instantly display the number of bytes that have been entered into the input box, or instantly read the input value to guide the search, which is the associated search effect of Google.
We can do a lot if we can just capture the moment.
What you need to know
First, we need to understand the difference between onchange and onpropertychange :

In IE, when the properties of an HTML element change, they can be captured instantly through onpropertychange.
When the onchange attribute value changes, the current element must also lose focus (onblur) in order to activate the event.

After understanding this, we find that the effect of onpropertychange is what we want, but unfortunately, it only works under IE. Can we find another time to replace onpropertychange?

After reading the information, I learned that the oninput event can be used to achieve the same effect in other browsers . It's great. We just need to distinguish the IE browser.

Use of oninput

Next, let's take a look at how to use oninput.
If you write the registration time directly on the page, you can do it as follows:
<、input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

However, when oninput is separated from the JS code, it is somewhat different from the normal event registration method and must be registered using addEventListener.

Difference between attachEvent and addEventListener

At this point, let's take a look at how to use attachEvent and addEventListener:

The attachEvent method attaches other processing events to an event. (Not supported on Mozilla series)
addEventListener method for Mozilla series

Example:

If written like this, only medhot3 will be executed

Write it like this:

The execution order is method3->method2->method1

If it is the Mozilla series, this method is not supported and addEventListener is needed

Now that we know how to use addEventListener to register the oninput event, let's go back to the problem we need to solve [dividing the browser].

Determine IE browser

How to distinguish IE?
This seems to be a common problem. There are many ways to find it on the Internet, which can be classified into two categories:
The first is to determine the functional attributes of the browser.
The second is to determine the traditional user-agent string, which may be the oldest and most popular detection method.
We won't go into detail here. We use a simpler method to judge

The problems we have encountered so far have been solved. Let's start writing code to test whether our ideas can be implemented.

The above brief analysis of html input and value change to add listening events is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

Original URL: http://www.web600.net/html/editor/JavaScript/201001131529.html