js入門-文本框輸入特定內容控制另一個文本框
阿新 • • 發佈：2018-05-25
body one input oct tex www. ext strong doctype
在填寫表單時，有時需要某些文本框隱藏，當一文本框輸入特定內容時才會顯示隱藏的文本框，這一功能可以用onchange事件或oninput事件實現。下面對比下兩種方法實現的區別：
onchange()定義和用法
onchange 事件會在域的內容改變時發生。
本文示例是在A文本框輸入A時顯示隱藏的文本框B。
完整代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oTxta=document.getElementById(‘txt_a‘); 9 var oDiv_b=document.getElementById(‘div_b‘); 10 oTxta.onchange=function showTxtb(){ 11 if (oTxta.value==‘A‘) { 12oDiv_b.style.display=‘block‘; 13 } 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <div class="div_a"> 20 A:<input type="text" id="txt_a" value="" onchange="showTxtb()"> 21 </div> 22 <div id="div_b" style="display: none;"> 23 B:<input type="text" id="txt_b" value=""> 24 </div> 25 <div id="div_c"> 26 C:<input type="text"> 27 </div> 28 29 </body> 30 </html>
效果如下：
可見使用onchange需要點擊頁面其他位置取消文本框焦點才能觸發。
oninput()定義和用法
oninput 事件在用戶輸入時觸發。
該事件在 <input> 或 <textarea> 元素的值發生改變時觸發。
提示： 該事件類似於 onchange 事件。不同之處在於 oninput 事件在元素值發生變化是立即觸發， onchange 在元素失去焦點時觸發。另外一點不同是 onchange 事件也可以作用於 <keygen> 和 <select> 元素。
語法
HTML 中:
<element oninput="myScript">
JavaScript 中:
object.oninput=function(){myScript};
完整代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oTxta=document.getElementById(‘txt_a‘); 9 var oDiv_b=document.getElementById(‘div_b‘); 10 oTxta.oninput=function showTxtb(){ 11 if (oTxta.value==‘A‘) { 12 oDiv_b.style.display=‘block‘; 13 } 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <div class="div_a"> 20 A:<input type="text" id="txt_a" value="" oninput="showTxtb()"> 21 </div> 22 <div id="div_b" style="display: none;"> 23 B:<input type="text" id="txt_b" value=""> 24 </div> 25 <div id="div_c"> 26 C:<input type="text"> 27 </div> 28 29 </body> 30 </html>
效果如下：
可見使用onchange不需要點擊頁面其他位置取消文本框焦點，輸入內容即可觸發。
js入門-文本框輸入特定內容控制另一個文本框