js monitors the instant changes in the input box value onpropertychange, oninput_javascript skills

The effect to be achieved
In many cases we will monitor changes in the value of the input box in real time in order to take immediate actions to guide the viewer to enhance the user experience of the website. For example, it can instantly display the number of bytes that have been entered into the input box, or instantly read the entered value for search guidance, which is Google's related search effect, etc.
A lot can be done if we can capture instant events.
What you need to know
First of all, we need to understand the difference between onchange and onpropertychange:
Under IE, when the attribute of an HTML element changes, it can be captured instantly through onpropertychange .
onchange must cause the current element to lose focus (onblur) before the event can be activated when the attribute value changes.
After understanding this, we found 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. This is great. We only need to distinguish the IE browser.
Usage of oninput
Let’s first understand how to use oninput.
If you write the registration time directly on the page, then the following writing method can be achieved:

However, when oninput is written in JS code and separated, it is somewhat different from the ordinary event registration method. You must use addEventListener to register.
The difference between attachEvent and addEventListener
Having said that, let’s take a look at how to use attachEvent and addEventListener:
The attachEvent method attaches other processing events to a certain event. (Mozilla series is not supported)
addEventListener method is used in Mozilla series
Example:
document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
If written like this, then only medhot3 will be executed
Written like this:
var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3) ;
The execution order is method3->method2->method1
If it is a Mozilla series, this method is not supported and you need to use addEventListener
var btn1Obj = document.getElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
The execution order is method1->method2->method3
After understanding how to use addEventListener to register oninput events, we can return to the problem to be solved [dividing browsers].
Judge IE browser
How to distinguish IE?
This seems to be a common question. There are many ways to find it on the Internet, which are classified into two categories:
One is to determine the functional attributes of the browser.
The second is to judge the traditional user-agent string, which may be the oldest and most popular detection method.
I won’t go into details here. We use a relatively simple method to judge

The problems we have encountered so far have been solved, and we started writing code to test whether our ideas can be realized.
Complete the code:

Example written directly on the page:

So beautiful , complete it once, preview the above code, and implement it in two ways on the page: first, direct reference in the page; second, reference in JS.
Tested and compatible with: IE6, IE7, IE8, Firefox, Opera, Chrome, Safari