思路

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. apache开源项目--kylin

    Kylin 是一个开源的分布式的 OLAP 分析引擎,来自 eBay 公司开发,基于 Hadoop 提供 SQL 接口和 OLAP 接口,支持 TB 到 PB 级别的数据量. Kylin 是: 超级快 ...

  2. DNS----域名解析系统

    DNS就是域名解析系统,它可以将IP转换成域名,也可以将域名转换成IP 1. 安装DNS服务       开始—〉设置—〉控制面板—〉添加/删除程序—〉添加/删除Windows组件—〉“网络服务”—〉 ...

  3. 基于React服务器端渲染的博客系统

    系统目录及源码由此进入 目录 1. 开发前准备 1.1 技术选型1.2 整体设计1.3 构建开发 2. 技术点 2.1 react2.2 redux, react-router2.3 server-r ...

  4. Asm Shader Reference --- Shader Model 2.0 part

    ps部分 ps_2_0 概览   Instruction Set                                   Name Description Instruction slot ...

  5. Unity3d 粒子工具注释

    今天群里有人问到瀑布粒子如何调整尺寸. 我查到ellipsoid可以调节产生粒子的空间范围,然后还需要调节粒子的长度.他那个瀑布太长了.max energy和min energy这两个参数可以用来控制 ...

  6. oracle 日志学习(转载)

    一,重做日志概念 重做日志文件(redo log file)对于Oracle数据库至关重要.它们是数据库的事务日志.通常只用于恢复,不过也可以用于以下工作: q 系统崩溃后的实例恢复 q 通过备份恢复 ...

  7. HW4.39

    public class Solution { public static void main(String[] args) { double sum; double baseSalary = 500 ...

  8. Robocopy是微软Windows Server 2003资源工具包中众多多用途的实用程序之一(它是基于强大的拷贝程序

    Robocopy是微软Windows Server 2003资源工具包中众多多用途的实用程序之一(它是基于强大的拷贝程序).没错,Robocopy的功能是拷贝文件,你也许会觉得无聊并且要翻阅下一篇文章 ...

  9. openstack 镜像自动扩容 resize拉伸

    The simplest way to support this in your image is to install the cloud-utils package (contains the g ...

  10. hdoj 2802 F(N)【递推 规律】

    F(N) Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...