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

onchange()定义和用法

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

本文示例是在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>

效果如下：

可见使用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>

效果如下：

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

js入门-文本框输入特定内容控制另一个文本框的更多相关文章

  1. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  2. JS文本框输入限制

    1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')&quo ...

  3. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  4. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  5. 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...

  6. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  8. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  9. 转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net

    引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></sc ...

随机推荐

  1. RocketMQ 集群监控以及Hello World

    RocketMQ 目前有两个版本  alibaba版本和apache版本 一.alibaba版本 tomcat部署: apache-tomcat-7.0.90.tar.gz jdk7 虚拟机redha ...

  2. JAR(Spring Boot)应用的后台运行配置

    酱油一篇,整理一下关于Spring Boot后台运行的一些配置方式.在介绍后台运行配置之前,我们先回顾一下Spring Boot应用的几种运行方式: 运行Spring Boot的应用主类 使用Mave ...

  3. Android开发之漫漫长途 XVII——动画(续)

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  4. 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. Java并发编程笔记之ConcurrentLinkedQueue源码探究

    JDK 中基于链表的非阻塞无界队列 ConcurrentLinkedQueue 原理剖析,ConcurrentLinkedQueue 内部是如何使用 CAS 非阻塞算法来保证多线程下入队出队操作的线程 ...

  6. Struts2学习（六）———— 文件上传和下载

    一.单文件上传 在没学struts2之前,我们要写文件上传,非常麻烦,需要手动一步步去获取表单中的各种属性,然后在进行相应的处理,而在struts2中就不需要了,因为有一个fileUpload拦截器帮 ...

  7. #7 Python顺序、条件、循环语句

    前言 上一节讲解了Python的数据类型和运算,本节将继续深入,涉及Python的语句结构,相当于Python的语法,是以后编写程序的重要基础! 一.顺序语句 顺序语句很好理解,就是按程序的顺序逻辑编 ...

  8. /proc文件系统 - 汇总

    0. /proc目录简介 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制. proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间 ...

  9. Spring Security之Remember me详解

    Remember me功能就是勾选"记住我"后,一次登录,后面在有效期内免登录. 先看具体配置: pom文件: <dependency> <groupId> ...

  10. soapUI工具使用方法、简介、接口测试

    一.soapUI简介 SOAP: WebService通过Http协议发送请求和接收结果时,发送的请求内容和结果内容都采用XML格式封装,并增加了一些特定的HTTP消息头,以说明HTTP消息头的内容格 ...