Home > Developer > Web Develop
In the past, the input box of HTML has no way to reflect the user's output content.
onkeyup, onkeydown Events, can not immediately and accurately obtain the user's input information, and onchange, onblur event, to wait until the point of loss, or press Enter, will be touched.
Now HTML5 new input event, can be achieved "immediately, refined to touch", similar to AJAX functions. The only missing point is that IE browser is not supported, but other browsers are supported.
The following HTML code, can be tested, the input event can be reached as "immediate, fine touch"; Old change events that need to lose focus, or press Enter, will only be touched.
1 <!DOCTYPE HTML>2 <HTML>3 <Head> 4 <Script>5 functionmyFunc1 (input) {6 document.getElementById ("OUTPUT1"). Value=input;7 }8 9 functionMYFUNC2 (input) {Ten document.getElementById ("Output2"). Value=input; One } A </Script> - </Head> - <Body> the <inputID= "INPUT1"type= "text"Oninput= "MyFunc1 (this.value)" /> - <BR/> - <inputID= "Input2"type= "text"onchange= "MyFunc2 (this.value)" /> - <P></P> + <OutputID= "OUTPUT1"></Output> - <BR/> + <OutputID= "Output2"></Output> A </Body> at </HTML>Oninput, onchange comparison
In the next step, if you write: Shopping mall, Internet Book City, to let input or textarea into the box, can be "immediately, precisely touch", as long as the use of HTML5 input event, you do not have to write the program to add AJAX functions, you can easily achieve the requirements.
The following HTML code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>Oninput</title>5 <Script>6 functionmyFunc1 (input) {7 document.getElementById ("OUTPUT1"). Value= 8 input* the;9 }Ten </Script> One </Head> A <Body> -Book Name: fast-HTML5,<BR/> - Price : 230, buy Quantity: the <inputID= "INPUT1"type= "Number"Step= "1"value= "0"Oninput= "MyFunc1 (this.value)" /> - <BR/><BR/> - Account of the payment: - <OutputID= "OUTPUT1"></Output> + </Body> - </HTML>
Figure 1 Perform the results
HTML5 's input event, the main missing point, is not supporting the micro-software IE browser, but support Chrome, Firefox, Opera, Safari, the Edge of the micro-software.
So in the Web, referencing this event does not affect the operation on the phone or tablet.
--------------------------------------------
--------------------------------------------
References:
[1] HTML5 perfect Wind Storm (third edition), Ch5, author: Lui Che woo Gao Xu
http://www.books.com.tw/products/0010668517
--------------------------------------------
Related articles:
[1] HTML Event Properties
Http://www.runoob.com/jsref/event-oninput.html
Http://www.w3school.com.cn/tags/html_ref_eventattributes.asp
[2] HTML5 input event detection output box change
Http://www.cnblogs.com/luozhihao/p/4649868.html
[3] HTML5 standard event oninput for input detection
Https://www.fedte.cc/p/604.html
--------------------------------------------
--------------------------------------------
HTML5 the new input event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
