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 ...
随机推荐
- [No0000194]聊聊 Chrome DevTools 中你可能不知道的调试技巧
对于前端开发者来说,ChromeDevTools 绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而ChromeDevTools 其实很强大,下面来聊聊一些你可能不知道的debu ...
- [svc]unix和cpu发展历史
最近搞汇编 , 有一款8086cpu,16bit, 支持内存1M 于是勾起了对计算机历史的兴趣,多了解了下 unix起源历史 [Unix发展历史 - 程序猿-贝岩博客 - CSDN博客]https:/ ...
- JavaScript基础理解及技巧（入门）
1.java和JavaScript的区别: (1)js只需要解释就可以执行了,而java需要先编译成字节码文.JavaScript的运行只需要浏览器的支持,而java的运行需要JVM(java虚拟机) ...
- outlook2016用Exchange轻松绑定腾讯企业邮箱
系统版本:Win10 X64 1709 英文版 邮箱:Outlook2016 背景知识: 1.发送邮件均使用SMTP协议(SMTP 全称“Simple Mail Transfer Protocol”, ...
- 《Java程序设计》第二周学习记录（1）
目录 第2章 基本数据类型与数组 2.1 标识符与关键字 2.2 基本数据类型 2.3 类型转换运算 2.4 输入.输出数据 2.5 数组 参考资料 第2章 基本数据类型与数组 2.1 标识符与关键字 ...
- char 类型的操作函数
1.内存充填 void *memset(void *s,int ch,size_t n); 是由C Run-time Library提供的提供的函数,作用是在一段内存块中填充某个给定的值,它是对较大的 ...
- CentOS 7静默安装Oracle 11g R2数据库软件
之前安装Oracle 11g R2数据库软件都是建立在图形界面上的,不过现在大部分服务器上都没有安装图形界面.图形界面安装较为方便,安装选项清晰,步骤明确,但Oracle还支持另一种安装方式,就是通过 ...
- Python学习之高级数组（一）
1.Python基础学习之高级数组(一) 1.1视图:就是与较大数组共享相同数据的较小数组.Numpy包提供数据视图的概念是为了精确地控制内存的使用方式. 数组视图.切片视图.转置和重塑视图等 数组 ...
- Qt 快捷键 复制当前行 向上复制 && 向下复制
网上的答案不一,我的快捷键是默认的配置,未做过修改. 向前复制当前行: Ctrl + Alt + up (向上箭头) 向后复制当前行:Ctrl + Alt + down(向下箭头) 补充一个:Ctrl ...
- word之选中文本
在word和notepad中: 特别是在文件很大,如果用鼠标下滑的话,不知道会滑多久呢, 快捷键+鼠标点击截至处