Home > Developer > Web Develop
When filling out a form, some text boxes are sometimes hidden, and hidden text boxes are displayed when a text box enters a specific content, which can be implemented with onchange events or Oninput events. Here's a comparison of the two approaches to achieving the difference:
onchange () Definition and usageThe onchange event occurs when the contents of the domain change.
The example in this article is to display a hidden text box B When you enter a in a text box.
The complete code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <Scripttype= "Text/javascript">7 window.onload=function(){8 varOtxta=document.getElementById ('txt_a');9 varOdiv_b=document.getElementById ('Div_b');Ten Otxta.onchange=functionShowtxtb () { One if(Otxta.value=='A') { A ODiv_b.style.display='Block'; - } - } the } - </Script> - </Head> - <Body> + <Divclass= "Div_a"> -A:<inputtype= "text"ID= "Txt_a"value=""onchange= "SHOWTXTB ()"> + </Div> A <DivID= "Div_b"style= "Display:none;"> atB:<inputtype= "text"ID= "Txt_b"value=""> - </Div> - <DivID= "Div_c"> -C:<inputtype= "text"> - </Div> - in </Body> - </HTML>
The effect is as follows:
Visible use onchange need to click elsewhere in the page to cancel the text box focus to trigger.
Oninput () Definition and usageThe Oninput event is triggered when the user enters.
The event is triggered when the value of the <input> or <textarea> element changes.
Tip: This event is similar to the onchange event. The difference is that the Oninput event is triggered immediately when the element value changes, onchange when the element loses focus. Another difference is that the onchange event can also be used for <keygen> and <select> elements.
GrammarIn HTML:
<oninput= "MyScript">
In JavaScript:
Object.oninput=function () {myScript};The complete code is as follows:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>Document</title>6 <Scripttype= "Text/javascript">7 window.onload=function(){8 varOtxta=document.getElementById ('txt_a');9 varOdiv_b=document.getElementById ('Div_b');Ten Otxta.oninput=functionShowtxtb () { One if(Otxta.value=='A') { A ODiv_b.style.display='Block'; - } - } the } - </Script> - </Head> - <Body> + <Divclass= "Div_a"> -A:<inputtype= "text"ID= "Txt_a"value=""Oninput= "SHOWTXTB ()"> + </Div> A <DivID= "Div_b"style= "Display:none;"> atB:<inputtype= "text"ID= "Txt_b"value=""> - </Div> - <DivID= "Div_c"> -C:<inputtype= "text"> - </Div> - in </Body> - </HTML>
The effect is as follows:
Visible use onchange do not need to click on the page elsewhere to cancel the text box focus, the input can be triggered.
JS Get Started-text box enter specific content control another text box
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
