一个input输入内容监听联动的demo
两个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的更多相关文章
- Android之输入内容监听回车键【Editor】
2.输入内容时按下回车键时监听 username.setOnEditorActionListener(new OnEditorActionListener() { @Override public b ...
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- 文件下载Controller,文件夹内容监听,文件上传,运行程序通过url实现文件下载
文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...
- 用nodejs搭建一个简单的服务监听程序
作为一个从业三年左右的,并且从事过半年左右PHP开发工作的前端,对于后台,尤其是对以js语言进行开发的nodejs,那是比较有兴趣的,虽然本身并没有接触过相关的工作,只是自己私下做的一下小实验,但是还 ...
- input 输入值的监听 禁止输入特殊字符
1.input 输入值的监听 //用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) ...
- 正则表达式控制Input输入内容 ,js正则验证方法大全
https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...
- 利用input event 实时监听input输入的内容
<div id="addNumber"> <p>How many people would you like to invite?</p> &l ...
- 利用input事件来监听移动端的输入
今天遇到一个新需求,经理要求评论功能需要限制字数,就像微博那样限制最多输入150字,这里就需要实时提醒用户还能输入多少字了. 在最开始的时候,想到的是监听keyup事件,然后计算用户输入的字数,但是有 ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
随机推荐
- 006Spring面向切面
01.基本术语---->POM中配置spring-aspects 1.通知(Advice)---->要做的事 前置通知(@Before) 后置通知(@After) 返回通知(@AfterR ...
- Two ways to assign values to member variables
setXxx()方法,带参数的构造方法.类名作为形式参数,其实里面需要传入一个该类的对象.类名作为返回值,其实返回的是一个该类的对象.
- Array inversion case
package basic.java; import java.util.Scanner; /* * 需求: * (1)键盘录入5个int类型的数据存储数组arr中 * (2)定义方法将arr数组中的 ...
- 关于App的cpu/内存/流量 /电量的方法(GT工具)
https://mp.weixin.qq.com/s?__biz=MzUzNTQxMzMzMg==&mid=2247484376&idx=1&sn=651e9cf22801b5 ...
- RN 解决CFBundleIdentifier", Does Not Exist
mac环境下,在命令行中run-ios构建时报错:CFBundleIdentifier", Does Not Exist 打开XCode,进入.xcodeproj文件,运行,编译时报错:'b ...
- Google 嘘! 嘘!
https://www.gufen.gq(无广告,原guso.ml,ggso.ga,guge.ga) https://c.aiguso.tk (无广告,体验良好) https://d.freedo.g ...
- 打通版微社区(6):部署微信插件及开通QQ云服务
写在前面: 此文是我最后写的.其实实际部署的时候,我是先安装了论坛并试图开通微信的微社区.发现微社区需要在微信公众平台的开发者中心里配置 "网页账号,网页授权获取用户基本信息"为论 ...
- webapi 支持 text/plain 请求
今天遇到一个需求,请求以HTTPS + XML 访问我的API ,普通的webapi 是不支持这个请求的,故做以下代码进行支持 新增一个类,类名为PlainTextTypeFormatter publ ...
- December 30th 2016 Week 53rd Friday
Life without love is like a tree without blossoms or fruit. 缺少爱的生活就像从未开花结果的枯树. Love is not only the ...
- There was a problem confirming the ssl certificate: [SSL: TLSV1_ALERT_PROTOCOL_VERSION] tlsv1 alert protocol version (_ssl.c:661) - skipping
Could not fetch URL https://pypi.python.org/simple/xlrd/: There was a problem confirming the ssl cer ...