实时获取input输入框中的值需要oninput和onpropertychange属性来实现。原因是onpropertychange属性为IE专属，而oninput属性支持大部分浏览器包括IE9及以上的版本。

　　oninput与onpropertychange失效的情况：
　　　oninput事件：1. 在脚本中改变value时，不会触发；2.从浏览器的自动下拉提示中选取时，不会触发。

例如：

    var testinput = document.createElement('input');

    if('oninput' in testinput){

        object.addEventListener("input",fn,false);

    }else{

        object.onpropertychange = fn;

    }

或者

    var ie = !!window.ActiveXObject;

    if(ie){

        object.onpropertychange = fn;

    }else{

        object.addEventListener("input",fn,false);

    }

下面举个具体的例子

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style>

		*{

			margin: 0;

			padding: 0;

		}

		input{

			display: block;

			border:1px solid #090;

			width: 200px;

			height: 40px;

			line-height: 40px;

			font-size: 16px;

			margin: 50px auto;

			text-indent: 2em;

		}

		p{

			width: 180px;

			padding-left: 10px;

			padding-right: 10px;

			height: 40px;

			background: #090;

			color: #fff;

			line-height: 40px;

			margin: 0 auto;

		}

	</style>

</head>

<body>

	<input type="text" id='btn' disable='disable' value="123">

	<p id="title"></p>

	<script>

	 	var oBtn = document.getElementById('btn');

	 	var oTi = document.getElementById('title');

	 	if('oninput' in oBtn){

	    		oBtn.addEventListener("input",getWord,false);

			}else{

	    		oBtn.onpropertychange = getWord;

			}

	 	// var ie = !!window.ActiveXObject;

	 //    if(ie){

	 //        oBtn.onpropertychange = getWord;

	 //    }else{

	 //        oBtn.addEventListener("input",getWord,false);

	 //    }

	 	function getWord(){

	 		oTi.innerHTML = oBtn.value;

	 	}

	</script>

</body>>

</html

演示：

JS实时获取输入框中的值的更多相关文章

  1. js循环获取table中的值

    <script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...

  2. JS中通过Input中id获取输入框中的值

    HTML中 <input type="text" id="ONE" oninput="kpi()"> JS中 function ...

  3. js与jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...

  4. jquery获取input输入框中的值

    如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...

  5. Js和Thymeleaf如何获取model中的值

    一.Jquery获取Model中的数据 1.将model中的值赋给hidden,然后Js获取隐藏域的值. 后台的实现: @RequestMapping("/QEditorMod1" ...

  6. js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)

    一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...

  7. Js/Jquery获取iframe中的元素

    转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...

  8. JS正则表达式获取字符串中特定字符

    JS正则表达式获取字符串中得特定字符,通过replace的回调函数获取. 实现的效果:在字符串中abcdefgname='test'sddfhskshjsfsjdfps中获取name的值test  实 ...

  9. （很难啊）如何实时获取DBGrid 中当前单元格输入的内容？ [问题点数：100分，结帖人yifawu100]

    如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.Selec ...

随机推荐

  1. 下载频道--IT资源关东煮第二期[申明：来源于网络]

    下载频道–IT资源关东煮第二期[申明:来源于网络] 地址:http://geek.csdn.net/news/detail/129509?ref=myread

  2. Ubuntu 16.04 Java8 安装

    添加ppa apt-get update apt install software-properties-common add-apt-repository ppa:webupd8team/java ...

  3. 安装ipa文件

    https://www.jianshu.com/p/419a35f9533a 1.通过iTunes直接拖动到左侧的侧边栏(未尝试) 2.通过Xcode点击进入Devices管理,添加ipa文件进行安装 ...

  4. Web开发——HTML DOM基础

    文档资料参考: 参考:HTML DOM 参考手册 参考:HTML DOM 教程 目录: 1.HTML DOM (文档对象模型) 2.查找 HTML 元素 2.1 通过 id 查找 HTML 元素 2. ...

  5. webpack介绍 安装 常用命令

    Webpack是一款用户打包前端模块的工具,它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源.主要是用来打包在浏览器端使用的javascript的.同时也能转换.捆绑 ...

  6. 《Mysql 分区分表》

    一:分区/分表 为了什么? - 当MySQL单表的数据量过大时,数据库的访问速度会下降,需要处理大量数据,所以需要把数据分散存储. - 常用 "水平" 切分 二:MySQL常见的水 ...

  7. sql server创建windows账户

    --不要干坏事 sql server中使用xp_cmdshell --1.允许配置高级选项 GO RECONFIGURE GO --2.开启xp_cmdshell服务 RECONFIGURE GO - ...

  8. [js]js中函数传参判断

    1,通过|| function fun(x,y){ x=x||0; y=y||1; alert(x+y); } fun(); 2.通过undefined对比 function fun(x,y){ if ...

  9. 基于usb4java的usb通讯

    下载java API及lib库地址:http://usb4java.org/index.html 1.导入所需要的库: 2.添加配置文件:文件名:javax.usb.properties:内容:jav ...

  10. 用python写多线程

    import threading #首先导入threading 模块,这是使用多线程的前提 from time import ctime,sleep def music(func): ): print ...