<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. btr_pcur_t

    /** Persistent cursor */ typedef struct btr_pcur_struct btr_pcur_t; /* The persistent B-tree cursor ...

  2. truncate table 和delete

    delete table 和 truncate table 使用delete语句删除数据的一般语法格式: delete [from] {table_name.view_name} [where< ...

  3. Android的图片压缩并上传

    Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...

  4. <十>面向对象分析之UML核心元素之关系

    关系        --->在UML中关系是非常重要的语义,它抽象出对象之间的联系,让对象构成特定的结构.        一,关联关系(association)

  5. 【转】win7(windows7)下java环境变量配置方法

    原文网址:http://jingyan.baidu.com/article/925f8cb836b26ac0dde0569e.html win7(windows7)下java环境变量配置方法,java ...

  6. 通过userAgent判断手机浏览器类型

    我们可以通过userAgent来判断,比如检测某些关键字,例如:AppleWebKit*****Mobile或AppleWebKit,需要注意的是有些浏览器的userAgent中并不包含AppleWe ...

  7. poco网络库分析,教你如何学习使用开源库

    Poco::Net库中有 FTPClient HTML HTTP HTTPClient HTTPServer ICMP Logging Mail Messages NetCore NTP OAuth ...

  8. wifi详解(五)

    1        Android平台的Wifi模块移植要点 1.1      Wifi结构 user interface Android WiFiService WPA_Supplicant DHD ...

  9. 字符集编码Unicode ,gb2312 cp936

    这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级.整理这篇文章的动机是两个问题: 问题一:使用Windows记事本的“另存为” ...

  10. LightOJ 1427 -Repository(ac自动机)

    题意: 求每个模式串在母串中出现的次数 #include <map> #include <set> #include <list> #include <cma ...