实时获取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. 分析servlet injection

    @WebServlet("/cdiservlet") ||url映射 public class NewServlet extends HttpServlet { private M ...

  2. Cordova打包Apk

    ======================== apk打包 ======================== keytool -genkey -v -keystore release-key.key ...

  3. IO调度算法的选择

    一) I/O调度程序的总结 1) 当向设备写入数据块或是从设备读出数据块时,请求都被安置在一个队列中等待完成. 2) 每个块设备都有它自己的队列. 3) I/O调度程序负责维护这些队列的顺序,以更有效 ...

  4. Asp.net 程序连接orcle如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行，

    本人使用orcale11g 安装orcale 之类以及navicat配置在这里不提,之后会写一篇文章来说明. 到此已经安装和配置navicat访问数据正常,但是运行Asp.net  程序报错 问题如下 ...

  5. 编写自定义django-admin命令

    Django为项目中每一个应用下的management/commands目录中名字没有以下划线开始的Python模块都注册了一个manage.py命令,我们可以利用这点来自定制一个命令(比如运行该命令 ...

  6. 011-MAC 设置环境变量path的几种方法

    一.概述 首先要知道你使用的Mac OS X是什么样的Shell,使用命令 echo $SHELL 如果输出的是:csh或者是tcsh,那么你用的就是C Shell. 如果输出的是:bash,sh,z ...

  7. C#基础加强(1)之索引器

    索引器 介绍 索引器,初学者可能听起来有些陌生,但其实我们经常会用到它,例如: // 字符串的索引器 string str = "hello world"; ]; // 获取到字符 ...

  8. Docker：从引擎和运行框架理解Docker（3）

    Docker是GO语言编写的. 1.Docker发挥的作用: 1.快速.一致.标准化的交付应用.从开发.测试.到部署交付到成产环境都可以使用docker命令处理image到不同的环境 2.部署和扩展: ...

  9. Vue引入elementUI组件全过程

    参考:https://www.cnblogs.com/fubinbin/p/9938528.html 在vue脚手架安装完成之后,页面正常跳出vue刚安装完的界面 我们开始引入elementui 1. ...

  10. torch随机数 manual_seed

    import torch seed = 2018 torch.manual_seed(seed) torch.cuda.manual_seed(seed) a=torch.rand([1,5]) # ...