<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. tomcat部署两个相同的项目报错不能访问

    需要在同一个tomcat上搭建一个项目的两个版本,都要能跑起来   直接复制两个项目部署,会出现两个错误: 1,webAppKey 冲突 2,tomcat启动会有内存溢出(OutOfMemoryErr ...

  2. lrj计算几何模板

    整理了一下大白书上的计算几何模板. #include <cstdio> #include <algorithm> #include <cmath> #include ...

  3. [swustoj 785] Divide Tree

    Divide Tree(0785) 问题描述 As we all know that we can consider a tree as a graph. Now give you a tree wi ...

  4. db2数据库Date相关函数

    1.db2可以通过SYSIBM.SYSDUMMY1.SYSIBM.DUAL获取寄存器中的值,也可以通过VALUES关键字获取寄存器中的值. SELECT 'HELLO DB2' FROM SYSIBM ...

  5. windows配置jdk

    一.JDK1.6下载 目前JDK最新版本是JDK1.6,到http://java.sun.com/javase/downloads/index.jsp可以下载JDK1.6. 二.JDK1.6安装 JD ...

  6. JavaScript--事件模型(转)

    在各种浏览器中存在三种事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了 ...

  7. 不重启mysql情况修改参数变量

    地球人都知道,更新mysql配置my.cnf需要重启mysql才能生效,但是有些时候mysql在线上,不一定允许你重启,这时候应该怎么办呢? 看一个例子: 1 2 3 4 5 6 7 8 9 10 m ...

  8. 使用carrierwave出现MiniMagick::Invalid错误的解决方法

    安装Imagemagick不能从源码安装,要从软件市场安装,否则会出现错误:MiniMagick::Invalid 使用make uninstall卸载后,重新在软件市场里安装,问题解决.

  9. Long Dominoes(ZOJ 2563状压dp)

    题意:n*m方格用1*3的方格填充(不能重叠)求有多少种填充方法 分析:先想状态,但想来想去就是觉得不能覆盖所有情况,隔了一天,看看题解,原来要用三进制 0 表示横着放或竖放的最后一行,1表示竖放的中 ...

  10. 【剑指offer 面试题17】合并两个排序的链表

    思路: 比较两个链表端点值的大小,通过递归的方式排列. #include <iostream> using namespace std; struct ListNode { int val ...