通过js实时检测文本框内容
思路
1，在获取文本框焦点后，启动定时器，每隔100毫秒来查看文本内容的改变
2，在文本框失去焦点后，清除定时器
下面是一个简单的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>input 监听</title>
</head>
<body>
<label>
<span>姓名</span>
<input id="input" type="text">
</label>
<p id="input-tip"></p>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript">
$("#input").focus(function(){
time = setInterval(function(){
var value = $("#input").val();
$("#input-tip").text(value);
console.log("setInterval");
},100);
}).blur(function(){
console.log("clearInterval");
clearInterval(time);
})
</script>
</body>
</html>
通过js实时检测文本框内容的更多相关文章
- JS实时检测文本框内容长度
通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景. HTML部分: <input id="Text1" type="text" on ...
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- JS来推断文本框内容改变事件
oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...
- JS、JQury - 文本框内容改变事件
例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...
- js 实时计算文本框字数限制
$.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...
- 同步文本框内容的JS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- JS和vue文本框输入改变p标签的内容测试
文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...
- JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。
文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...
随机推荐
- [039] 微信公众帐号开发教程第15篇-自定义菜单的view类型（访问网页）
引言及内容概要 距离写上一篇文章<自定义菜单的创建及菜单事件响应>整整过了两个月的时间,那时公众平台还没有开放view类型的菜单.在不久前,微信公众平台悄悄开放了view类型的菜单,却没有 ...
- maven安装步骤
第一步:配置maven环境 maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完成.Maven是 Apache 下的一个项目,目前最新版本是 3.0.4,我用的也是这个. ...
- spring--DI--3
3.1.1 依赖和依赖注入 传统应用程序设计中所说的依赖一般指“类之间的关系”,那先让我们复习一下类之间的关系: 泛化:表示类与类之间的继承关系.接口与接口之间的继承关系: 实现:表示类对接口的实现 ...
- CLR via C# 读书笔记 6-2 不同AppDomain之间的通信 z
跨AppDomain通信有两种方式 1.Marshal By reference : 传递引用 2.Marshal By Value : 把需要传递的对象 通过序列化反序列化的方式传递过去(值拷贝) ...
- CodeForces 370A Rook, Bishop and King
此题看似很简单,但实际上有不少细节,WA点不少.分情况处理即可. #include<cmath> #include<cstdio> #include<string> ...
- Linux中的权限管理
touch 11.txt(创建了一个文件) chown zhangsan:zhangsan 11.txt ll(可看到11.txt的属主和属组都改为了zhangsan) useradd lisi(添加 ...
- cloudstack安装篇3-SELinux配置、NTP时间同步、配置ClouStack软件库
一.SELinux配置 为了让CloudStack正常工作,我们必须将SELinux设置为permissive.需要在当前系统运行状态下和启动后都能够生效,进行以下配置. 在系统运行状态下的将SELi ...
- HDOJ-ACM1016(JAVA) 字典序全排列，并剪枝
转载声明:原文转自http://www.cnblogs.com/xiezie/p/5576273.html 题意: 一个环是用图中所示的n个圆组成的.把自然数1.2.…….n分别放入每个圆中,并在相邻 ...
- wave文件(*.wav)格式、PCM数据格式, goldwave 可以播放pcm raw audio
1. 音频简介 经常见到这样的描述: 44100HZ 16bit stereo 或者 22050HZ 8bit mono 等等. 44100HZ 16bit stereo: 每秒钟有 44100 次采 ...
- java枚举enum
http://www.cnblogs.com/wenruo/p/5349614.html java的枚举通过关键字enum实现.可以理解为一个类,不过这个类由编译器自动加了一些方法. static v ...