Deep understanding of the DOM event Type series fifth-text events

deep understanding of the DOM event Type series fifth-text events front.

If the DOM structure changes, the trigger is a change event, and if the text in the text box changes, the text event is triggered

HTML5 adds many type attributes to the input control, greatly increasing the application scenario for the input control. One of these is the type= "range" input control, which can change the value value by dragging the cursor, but not all browsers can display it in real time, except the ie10+ browser

<input type= "range" min= "0" max= "ten" step= "0.5" value= "6"/>

So which text events can monitor cursor changes in real time? This article will use this as a primer to introduce text events in detail

Change

When it comes to text changes, the first thing to think about is the change event.

For <input> and <textarea> elements, triggered when they lose focus and value changes; for <select> elements, triggered when their options change

<input id= "test" value= "Please change content and remove focus" >
<script>
test.onchange = function () {
    Test.style.backgroundColor = ' pink ';
}
</script>

Only in IE browser, the Change event has a real-time effect on the cursor, and the changes event does not work until the mouse is released under other browsers.

<input id= "test" type= "range" min= "0" max= "ten" value= "6"/> <span "result
" ></span>
< script>
test.onchange = function () {
    result.innerhtml = test.value;
}
</script>

TextInput

The DOM3-level event--textinput a new event to replace the KeyPress event. This event is triggered when a user enters a character in an editable region

[note] This event only supports DOM2-level event handlers, and only Chrome and Safari browsers support

TextInput and KeyPress events are two different.

The "1" textinput event is triggered only when the user presses a key that can enter the actual character, and the KeyPress event triggers when the key that can affect the text display is pressed (for example, enter).

"2" any element that can get the focus can trigger the KeyPress event, but only editable regions can trigger the TextInput event

<button id= "Test" > button </button>
<script>
//console output only 1, do not output 2
test.onkeypress = function () { Console.log (1);}
Test.addeventlistener (' TextInput ', function () {Console.log (2)})
</script>

<input id= the "test" >
<script>
/console output in 1-2 order
test.onkeypress = function () {console.log (1);}
Test.addeventlistener (' TextInput ', function () {Console.log (2)})
</script>

Because the TextInput event is primarily about characters, its event object also contains a Dada attribute whose value is the character entered by the user

For example, in lowercase mode, the user presses the S key, the data value is ' s ', and if the key is pressed in uppercase mode, the value of data is ' s '

<input id= "test" ><span id= "result" ></span>
<script>
test.addeventlistener (' TextInput ', function (e) {
    e = e | | event;
    result.innerhtml = E.data;
})
</script>

Because the <input type= "range" > cursor is not an editable region, the TextInput event has no effect on the cursor change

input

In the text event, there is an input event in addition to the TextInput event

HTML5 has added an input event that triggers immediately if the input box content changes, but changing value through JavaScript does not trigger

So the difference between this event and the Change event is that you don't need to remove the focus to trigger it.

[note] The event ie8-browser does not support

<input id= "Test" >
<script>
test.oninput = function () {
    this.style.background = ' pink ';
}
</script>

This event can be used in CHROME/SAFARI/FIREFOX/IE9 browsers to monitor cursor changes in real time

<input type= "range" id= "input" ><span id= "result" ></span>
<script>
    input.oninput = function () {
        result.innerhtml = this.value;
    }
</script