js入门-文本框输入特定内容控制另一个文本框
Posted huangin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js入门-文本框输入特定内容控制另一个文本框相关的知识，希望对你有一定的参考价值。
在填写表单时，有时需要某些文本框隐藏，当一文本框输入特定内容时才会显示隐藏的文本框，这一功能可以用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‘) { 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="" 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入门-文本框输入特定内容控制另一个文本框的主要内容，如果未能解决你的问题，请参考以下文章