<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. ie下jquery ajax 80020101错误的解决方法

    <script language="javascript">    <!--    function checkAll(name,isCheck){       ...

  2. 宏HASH_GET_FIRST

    /*******************************************************************//** Gets the first struct in a ...

  3. UVa 1515 (最小割) Pool construction

    题意: 输入一个字符矩阵,'.'代表洞,'#'代表草地.可以把草改成洞花费为d,或者把洞改成草花费为f,最后还要在草和洞之间修围栏花费为b. 但要保证最外一圈是草,求最小费用. 分析: 还不是特别理解 ...

  4. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

  5. FFMPEG 库移植到 VC 需要的步骤

    在VC下使用FFMPEG编译好的库,不仅仅是把.h,.lib,.dll拷贝到工程中就行了,还需要做以下几步.(此方法适用于自己使用MinGW编译的库,也同样适用于从网上下载的编译好的库,例如http: ...

  6. 【转】Linux Posix Timer使用

    原文网址:http://blog.csdn.net/hongszh/article/details/8608781 最强大的定时器接口来自POSIX时钟系列,其创建.初始化以及删除一个定时器的行动被分 ...

  7. jQuery 制作的Tab标签切换选项卡

    基于jQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类 ...

  8. POJ 1860 Currency Exchange

    题意:有n种货币,可以互相兑换,有m个兑换规则,兑换规则给出汇率r和手续费c,公式为b = (a - c) * r,从a货币兑换为b货币,问能不能通过不断的兑换赚钱,兑换期间手中的钱数不可以为负. 解 ...

  9. C# 邮件发送系统

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  10. bzoj 1001: [BeiJing2006]狼抓兔子 平面图最小割

    平面图跑最大流 可以转换为其对偶图跑最短路 一个环对应一个割  找到最小环(即最短路)极为所求,注意辅助边的建立 加入读入优化  不过时间还是一般  估计是dij写的不好   大神勿喷~~~ /*** ...