js入门-文本框输入特定内容控制另一个文本框

时间：2021-11-03 20:21:36

在填写表单时，有时需要某些文本框隐藏，当一文本框输入特定内容时才会显示隐藏的文本框，这一功能可以用onchange事件或oninput事件实现。下面对比下两种方法实现的区别：

onchange()定义和用法

onchange 事件会在域的内容改变时发生。

js入门-文本框输入特定内容控制另一个文本框

本文示例是在A文本框输入A时显示隐藏的文本框B。

完整代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript">
         window.onload=function(){
             var oTxta=document.getElementById('txt_a');
             var oDiv_b=document.getElementById('div_b');
             oTxta.onchange=function showTxtb(){
                 if (oTxta.value=='A') {
                     oDiv_b.style.display='block';
                 }
             }
         }
     </script>
 </head>
 <body>
     <div class="div_a">
         A:<input type="text" id="txt_a" value="" onchange="showTxtb()">
     </div>
     <div id="div_b" style="display: none;">
         B:<input type="text" id="txt_b" value="">
     </div>
     <div id="div_c">
         C:<input type="text">
     </div>

 </body>
 </html>

效果如下：

js入门-文本框输入特定内容控制另一个文本框

可见使用onchange需要点击页面其他位置取消文本框焦点才能触发。

oninput()定义和用法

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

语法

HTML 中:

<element oninput="myScript">

JavaScript 中:

object.oninput=function(){myScript};

完整代码如下：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript">
         window.onload=function(){
             var oTxta=document.getElementById('txt_a');
             var oDiv_b=document.getElementById('div_b');
             oTxta.oninput=function showTxtb(){
                 if (oTxta.value=='A') {
                     oDiv_b.style.display='block';
                 }
             }
         }
     </script>
 </head>
 <body>
     <div class="div_a">
         A:<input type="text" id="txt_a" value="" oninput="showTxtb()">
     </div>
     <div id="div_b" style="display: none;">
         B:<input type="text" id="txt_b" value="">
     </div>
     <div id="div_c">
         C:<input type="text">
     </div>

 </body>
 </html>

效果如下：

js入门-文本框输入特定内容控制另一个文本框

可见使用onchange不需要点击页面其他位置取消文本框焦点，输入内容即可触发。

相关文章