<script type="text/javascript">
//其他浏览器
function OnInput (event) {
alert ("文本内容: " + event.target.value);
}
// IE浏览器
function OnPropChanged (event) {
if (event.propertyName.toLowerCase () == "value") {
alert ("文本内容: " + event.srcElement.value);
}
}
</script>
<input type="text" id="info" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" value="Text field" />

  oninput 是 HTML5 的标准事件,IE9以下是不支持的.需要使用 IE 特有的 onpropertychange 事件替代.onchange是失去焦点才触发

//监听输入框值的即时变化
<script>
function immediately(){
var element = document.getElementById("mytext");
if("\v"=="v") {
element.onpropertychange = webChange;
}else{
element.addEventListener("input",webChange,false);
}
function webChange(){
if(element.value){document.getElementById("test").innerHTML = element.value};
}
}
</script>
//写在js
<input type="text" name="textfield" id="mytext" onclick="immediately()"/>
<div>您输入的值为:<span id="test">还未输入</span></div>
//直接写在页面
<input type="text" name="textfield" oninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" />
<div>您输入的值为:<span id="webtest">还未输入</span></div>

  

js即时监听文本内容的更多相关文章

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

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

  2. js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  3. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  4. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  5. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  6. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  7. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  8. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  9. 2016-1-6第一个完整APP 私人通讯录的实现 2:增加提示用户的提示框,监听文本框

    一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...

随机推荐

  1. Java 解析 XML

    Java 解析 XML 标签: Java基础 XML解析技术有两种 DOM SAX DOM方式 根据XML的层级结构在内存中分配一个树形结构,把XML的标签,属性和文本等元素都封装成树的节点对象 优点 ...

  2. LA 4728 (旋转卡壳) Squares

    题意: 求平面上的最远点对距离的平方. 分析: 对于这个数据量枚举肯定是要超时的. 首先这两个点一定是在凸包上的,所以可以枚举凸包上的点,因为凸包上的点要比原来的点会少很多,可最坏情况下的时间复杂度也 ...

  3. [LA 3887] Slim Span

    3887 - Slim SpanTime limit: 3.000 seconds Given an undirected weighted graph G <tex2html_verbatim ...

  4. linq xml读取

    <?xml version="1.0" encoding="UTF-8" ?> <cache> <chatOld> < ...

  5. ti processor sdk linux am335x evm /bin/create-sdcard.sh hacking

    #!/bin/bash # # ti processor sdk linux am335x evm /bin/create-sdcard.sh hacking # 说明: # 本文主要对TI的sdk中 ...

  6. noip2000提高组题解

    事实再次向我证明了RP的重要性... 第一题:进制转换 是我最没有把握AC的一道题目却是我唯一一道AC的题目,真是讽刺.看完题目几乎完全没有往正常的解法(取余倒序)去想,直接写了搜索,因为数据范围在2 ...

  7. Android 开发框架介绍

    一.概述 现android开发有很多开发框架使用,做App不一定用到框架,但好框架的思想也是值得学习.选择合适的开发框架可提供实用功能,简化项目开发提升效率. 二.Afinal框架 简介 Afinal ...

  8. 移动对meta的定义

    以下是meta每个属性详解 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用. 一.<meta http-equiv="Content-Ty ...

  9. C# chart绑定数据的方式整理

    C#chart 画图曲线的条数决定是你的数据源也就Series.Series是对象 你动态创建就可以了. 一.数组, List 等简单Collection类型的方式 Series s1= new Se ...

  10. c#写入Mysql中文显示乱码 解决方法 z

    mysql字符集utf8,c#写入中文后,全部显示成?,一个汉字对应一个? 解决方法:在数据库连接字符串中增加字符集的说明,Charset=utf8,如 MySQLConnection con = n ...