思路

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实时检测文本框内容的更多相关文章

  1. JS实时检测文本框内容长度

    通过js代码实时监测,文本框内容的变化以及长度,下图是一个实际使用场景. HTML部分: <input id="Text1" type="text" on ...

  2. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  3. JS来推断文本框内容改变事件

       oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...

  4. JS、JQury - 文本框内容改变事件

    例子: 效果: 前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="De ...

  5. js 实时计算文本框字数限制

    $.fn.myTarea = function(){ return this.each(function(){ $(this).bind('input propertychange', functio ...

  6. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

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

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

  9. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

随机推荐

  1. 从零开始学习jQuery (七) jQuery动画-让页面动起来!

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...

  2. asp.net 使用 MongoDB 初体验

    首先:驱动 如果asp.net 想使用MongoDB,.net没有自带的链接类.得用第三方或官方的链接类. 当然有很多种驱动,我就不一一介绍了. 今天我就介绍一个我比较常用的驱动-----MongoD ...

  3. 关于ButterKnife 8.1.0使用遇到的问题

    ButterKnife注解方式 和eventbus 差不多 都很好用 @OnClick(R.id.button) void onButtonClick() { //TODO implement Toa ...

  4. 腾讯微博OAuth2.0认证介绍

    腾讯微博开放平台,是基于腾讯微博系统,为广大开发者和用户提供的开放数据分享与传播平台. 广大开发者和用户登录平台后,就可以使用平台提供的开放API接口,创建应用从微博系统获取信息,或将新的信息传播到整 ...

  5. .9.png

    .9.png是一种非失真性压缩位图图形文件格式.PNG格式是非失真性压缩的,允许使用类似于GIF格式的调色板技术,支持真彩色图像,并具备阿尔法通道(半透明)等特性.现在有很多人使用PNG格式于互联网及 ...

  6. oracle创建临时表

    Oracle临时表可以说是提高数据库处理性能的好方法,在没有必要存储时,只存储在Oracle临时表空间中.希望本文能对大家有所帮助. 1 .前言 目前所有使用 Oracle 作为数据库支撑平台的应用, ...

  7. 动态链接库DLL

    函数和数据被编译进一个二进制文件(通常扩展名为.LIB). 静态库: 在使用静态库的情况下,在编译链接可执行文件时,链接器从库中复制这些函数和数据并把它们和应用程序的其它模块组合起来创建最终的可执行文 ...

  8. ZOJ-3721 Final Exam Arrangement 贪心

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3721 容易的贪心题,排个序.. //STATUS:C++_AC_ ...

  9. 如果iis的配置文件 applicationHost.config坏掉了， 会在 C:\inetpub\history\ 中存储历史备份。复制过去还原就可以了-摘自网络

    You will usually get the error ‘Configuration file is not well-formed XML’ ‘C:\Windows\system32\inet ...

  10. 北京Uber优步司机奖励政策(2月3日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...