JS实时获取输入框中的值
实时获取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实时获取输入框中的值的更多相关文章
- js循环获取table中的值
<script type="text/javascript"> function getTdValue() { var tableId = document.getEl ...
- JS中通过Input中id获取输入框中的值
HTML中 <input type="text" id="ONE" oninput="kpi()"> JS中 function ...
- js与jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML 一.jquery获取input文本框中的值 通过 ...
- jquery获取input输入框中的值
如何用javascript获取input输入框中的值,js/jq通过name.id.class获取input输入框中的value 先准备一段 HTML <input type="tex ...
- Js和Thymeleaf如何获取model中的值
一.Jquery获取Model中的数据 1.将model中的值赋给hidden,然后Js获取隐藏域的值. 后台的实现: @RequestMapping("/QEditorMod1" ...
- js获取输入框中当前光标位置并在此位置插入字符串的方法(angularjs+ts)
一半是参照别人代码,一半是自己代码,略笨拙,如果有更好的方法希望分享. 获取当前光标位置的方法 getCaretPosition (obj:any) { //获取输入框中当前光标的位置,obj为此输入 ...
- Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
- JS正则表达式获取字符串中特定字符
JS正则表达式获取字符串中得特定字符,通过replace的回调函数获取. 实现的效果:在字符串中abcdefgname='test'sddfhskshjsfsjdfps中获取name的值test 实 ...
- （很难啊）如何实时获取DBGrid 中当前单元格输入的内容？ [问题点数：100分，结帖人yifawu100]
如何获取DBGrid 中当前单元格输入的内容? 还没输入完成,我想实时获取 Cell中的内容,以便作其他处理,用什么事件呢? 所以Field的Onchange事件是没用的. DBGrid1.Selec ...
随机推荐
- [efficiency] emacs入门
一. 没记错的话,这可能是第三次读emacs tutorial了.前两次读的非常慢,也不记得有没有读完了.总之最后都忘光了. 这次读的很顺畅,利用工作的空闲时间加上今天晚上(周日).总算是读完了. 没 ...
- AngularJS实现可伸缩的页面切换
AngularJS实现可伸缩的页面切换 AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易.只需要使用一个ng-view,让我 ...
- Java学习-050-AES256 之 java.security.InvalidKeyException: Illegal key size or default parameters 解决方法
在进行 Java AES 加密测试时,出现如下错误信息: java.security.InvalidKeyException: Illegal key size or default paramete ...
- py三个面试小问题
1.是否遇到过Python的模块间循环引用的问题,如何避免它? 这是代码结构设计的问题,模块依赖和类依赖,如果老是觉得碰到循环引用可能的原因有几点: a.可能是模块的分界线划错地方了 b.可能是把应该 ...
- Spring的bean管理（注解方式）
注解:代码中的特殊标记,注解可以使用在类.方法.属性上面,使用注解可实现一些基本的功能.注解的写法是@注解名称(属性=属性值). 使用注解创建对象 第一步,创建Web项目,引入Spring的开发包 第 ...
- git：当本地分支中的代码和develop分支上有很多冲突，希望删掉本地分支，重新建立新的分支，怎么解决？
git:当本地分支中的代码和develop分支上有很多冲突,希望删掉本地分支,重新建立新的分支,但是git中说你需要先解决当前的冲突,这种情况怎么解决 这种情况可以在代码编辑器中点击commit,然后 ...
- selenium操作浏览器
import org.openqa.selenium.WebDriver; import common.StartFireFox; public class TestBrowser { public ...
- 三、UI开发之核心基础——约束（入门）
先学个新技能:添加图片控件Image View iOS的图片控件是ImageView,ImageView通过提前载入用户指定的图片资源来显示相应的图片. 所以图片控件的关键信息有3个: 1. Imag ...
- 010 Editor - Binary Templates
010 Editor是一款非常强大的文本/十六进制编辑器,除了文本/十六进制编辑外,还包括文件解析.计算器.文件比较等功能,但它真正的强大之处还在于文件的解析功能.我们可以使用010Edito ...
- cocos creator 动态创建精灵
var node = new cc.Node();var sprite = node.addComponent(cc.Sprite);sprite.spriteFrame = new cc.Sprit ...