两个input,一个在其中一个输入,内容在另一个input中实时回显

代码如下

<!DOCTYPE html>

<html>

<head>

<title>demo.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">

<meta name="description" content="this is my page">

<meta name="content-type" content="text/html; charset=UTF-8">

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div style='padding:100px;width:60%'>

        <div>

            <h3>一个input联动的demo</h3>

        </div>

        <hr>

        <div>

            <div>id为master的input</div>

            <input id='master' type='text' class='form-control'>

        </div>

        <div>

            <div>id为slave的input</div>

            <input id='slave' type='text' class='form-control'>

        </div>

    </div>

</body>

<script type="text/javascript">

    $(function() {

        $('#master').keyup(function() { //master键入过程中的监听函数

            var me = $(this); //获取master的input

            var val = me.val(); //获取master的input的val

            $('#slave').val(val); //将master中键入的内容实时的拿到slave中;

        })

    })

</script>

</html>

效果如下

一个input输入内容监听联动的demo的更多相关文章

  1. Android之输入内容监听回车键【Editor】

    2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public b ...

  2. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  3. 文件下载Controller,文件夹内容监听，文件上传，运行程序通过url实现文件下载

    文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...

  4. 用nodejs搭建一个简单的服务监听程序

    作为一个从业三年左右的,并且从事过半年左右PHP开发工作的前端,对于后台,尤其是对以js语言进行开发的nodejs,那是比较有兴趣的,虽然本身并没有接触过相关的工作,只是自己私下做的一下小实验,但是还 ...

  5. input 输入值的监听 禁止输入特殊字符

    1.input  输入值的监听 //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) ...

  6. 正则表达式控制Input输入内容 ,js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  7. 利用input event 实时监听input输入的内容

    <div id="addNumber"> <p>How many people would you like to invite?</p> &l ...

  8. 利用input事件来监听移动端的输入

    今天遇到一个新需求,经理要求评论功能需要限制字数,就像微博那样限制最多输入150字,这里就需要实时提醒用户还能输入多少字了. 在最开始的时候,想到的是监听keyup事件,然后计算用户输入的字数,但是有 ...

  9. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

随机推荐

  1. 使用PuTTy在CentOS下安装web.py与简单的文件传输

    两周前,出于帮朋友忙的目的,尝试了一下微信公众号的菜单自定义与自动回复功能的实现,成了. 两周后,需要将代码转移至朋友新购的服务器上,发现基本操作全忘记了,麻瓜!所以记一笔,希望也能对大家也有帮助. ...

  2. vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

    问题: 就是 bulid 打包后,想本地看看效果,本地看不了.... 网上看到一个....   具体更多在: http://www.dabaipm.cn/static/frontend/346.htm ...

  3. webstorm 打开后 一直停留在scanning files to index....，或跳出内存不够的提示框

    用着有时会这样,超级卡, 网上搜了下,原来如此,记录下,免得忘了. ------------------------- 说明: 在npm install 后,会出现Scanning files to ...

  4. vsftpd for Anonymous Downloads on Ubuntu 16.04

    Introduction FTP, short for File Transfer Protocol, is a network protocol that was once widely used ...

  5. PID控制算法

    PID控制算法 四轴如何起飞的原理 四轴飞行器的螺旋桨与空气发生相对运动,产生了向上的升力,当升力大于四轴的重力时四轴就可以起飞了. 四轴飞行器飞行过程中如何保持水平: 我们先假设一种理想状况:四个电 ...

  6. 在 O(1) 时间删除链表结点（C 和 Python 实现）

    (说明:本博客中的题目.题目详细说明及参考代码均摘自 “何海涛<剑指Offer:名企面试官精讲典型编程题>2012年”) 题目 给定单向链表的头指针和一个结点指针,定义一个函数在 O(1) ...

  7. Struts 2 官方文档中文版

    最近正在学 Struts 2 ,咱英文水平不行啊,找到了<Struts 2 官方文档中文版>,虽然翻译的不全,有总比没有强. 地址:https://cwiki.apache.org/con ...

  8. SQL Server 表的管理_关于事务操作的详解（案例代码）

    SQL Server 表的管理_关于事务操作的详解(案例代码) 1.概念 事务(transaction): 是将多个修改语句组合在一起的方法,这个方法中的所有语句只有全部执行才能正确完成功能.即要么全 ...

  9. 3D旋转相册的实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 5 hbase-shell + hbase的java api

    本博文的主要内容有 .HBase的单机模式(1节点)安装 .HBase的单机模式(1节点)的启动 .HBase的伪分布模式(1节点)安装  .HBase的伪分布模式(1节点)的启动    .HBase ...