两个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. vue-cli构建项目 npm run build后应该怎么运行在本地查看效果

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

  2. 微服务架构之spring cloud ribbon

    现在负载均衡是通用的解决分压的技术方案,实现方式一般分为服务端或者客户端,服务端大部分是使用中间件实现,spring cloud ribbon 是一个客户端负载均衡组件.跟spring cloud e ...

  3. Gulp前端服务器本地搭建

    前端服务器本地搭建分三阶段: 1.Node.js的安装 2.Npm环境配置 3.编写JS文件 1.Node.js安装: 如图所示: Next: 选择I accept 然后Next: 选择安装文件的位置 ...

  4. maven项目ssh框架的整合

    1.环境 eclipse版本:Eclipse Mars2 4.5jdk版本:1.8maven版本:apache-maven 3.3.9zhnegs这是主要的开发工具版本,ssh的各种jar包版本就不列 ...

  5. 三、angularjs上传图片

    上传图片需要引入插件ngFileUpload,使用bower安装方法: bower install ng-file-upload --save,安装后需要在命名app的名字js文件中注入,如下所示: ...

  6. C#des加密算法指定键的大小对于此算法无效

    api接口调用的时候,需要和java的进行加密通信,通信过程中用到DES加密,java那边DES的key为64位字符串,而之前c#的DES加密是key为8位 DESCryptoServiceProvi ...

  7. win8.1 安装msi软件出现 2503、2502

    问题现象: 安装Msi封包的程序的时候,老是提示 2503 和 2502 错误. 解决办法: 命令提示符提示安装程序权限 右击开始按钮,然后选择命令提示如(管理员)

  8. 万能的JDBC工具类。通过反射机制直接简单处理数据库操作

    package com.YY.util; import java.io.IOException; import java.io.InputStream; import java.sql.Connect ...

  9. vs安装部署“必备”组件里面正常情况没有出现office2010 PIA组件

    vs安装部署“必备”组件里面正常情况没有出现office2010 pia组件时,将 Office2010PIARedist 文件夹放在C:\Program Files\Microsoft SDKs\W ...

  10. 乘风破浪：LeetCode真题_004_Median of Two Sorted Arrays

    乘风破浪:LeetCode真题_004_Median of Two Sorted Arrays 一.前言 说到算法,最难的就是一些需要通过分析得到一些递推公式或者有用的结论,进而用来解决问题的方法了. ...