实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对
首先我们创建一个input输入框
<form name='loginForm'>
<input type='text' name='user'/>
</form>
接着获取这个文本框
var loginForm=document.forms['loginForm'],
user=loginForm.elements['user'];
//无需设置input的id属性,只设置name即可
方法一
change事件
user.onchange=function(){
consolo.log(user.value);
}
没错,这个方法的确可以帮助我们解决监听input输入内容的需求,不过这个方法有一个致命的缺点,他不是实时监听,只有input失去焦点且文本框内容发生改变才会触发。
方法二
keydown事件
keypress事件
keyup事件
这是三个键盘事件,不过这三个事件还是有一些不同
1.当按一下任意键,会触发onkeydown事件,如果不松开,将一直触发。
2.当按一下字符键(比如abcd1234这些)会触发onkeypress事件,如果不松开,将一直触发这个事件。
3.当释放键盘上的键,才触发onkeyup事件。
4.按下一个键盘上的字符键,三种事件的触发顺序keydown -> keypress -> keyup
5.按下esc键,在firefox浏览器以及ie浏览器会触发keypress事件,在chrome浏览器和Opera浏览器不会触发keypress(js高级程序设计第三版P379页的说法并不精确)
user.onkeypress=function(){
console.log(user.value);
};
user.onkeydown=function(){
console.log(user.value);
};
user.onkeyup=function(){
console.log(user.value);
}
实际检测时会发现,keydown事件以及keypress事件会存在延迟,每次获取的输入值,都是之前的,总是慢半拍,原因是keydown与keypress总是在新值发生改变之前触发。
最后发现只有keyup符合要求,不过keyup也不是完美的,缺点就是当你复制粘贴值进去的时候,或者浏览器自动记住的值输入进去的时候,keyup事件不会触发
方法三
input事件
user.oninput=function(){
console.log(user.value);
}
input事件就可以完美解决这个问题,不过他也有小缺点,那就是兼容性问题,它不支持ie9以下的浏览器,不过还好,我们有一个ie专属的事件propertychange()
实时监听input输入内容的N种方法的更多相关文章
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- [转] 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- 利用input event 实时监听input输入的内容
<div id="addNumber"> <p>How many people would you like to invite?</p> &l ...
- 实时监听input输入情况
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- iOS UITextField实时监听获取输入内容,中文状态去除预输入拼音
http://blog.csdn.net/cse110/article/details/51360796 - (void)textFieldDidChange:(UITextField *)textF ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- input实时监听(input oninput propertychange onpropertychange)
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...
- 微信小程序监听input输入并取值
小程序的事件分为两种,冒泡和非冒泡事件,像<form/>的submit事件,<input/>的input事件,<scroll-view/>的scroll事件等非冒泡 ...
随机推荐
- 垃圾回收(GC Garbage collection)
JS有自动垃圾清理机制, 如果有不需要用的对象,只需要设置对象=null即可 Var a = new object() a = null
- TrustManagerService.java
/* * Copyright (C) 2014 The Android Open Source Project * * Licensed under the Apache License, Versi ...
- lua中查询表元素规则(__index)解析
阅读文章后用一个流程图来总结__index的规则用法 总结一下Lua查找一个表元素时的规则,其实就是如下3个步骤: 1.在表中查找,如果找到,返回该元素,找不到则继续 2.判断该表是否有元表,如果没有 ...
- OO第二次博客作业(第二单元总结)
在我开始写这次博客作业的时候,窗外响起了希望之花,由此联想到乘坐自己写的电梯FROM-3-TO--1下楼洗澡,然后······ 开个玩笑,这么辣鸡的电梯肯定不会投入实际使用的,何况只是一次作业.还是从 ...
- centos的nginx如何访问本地共享文件夹的文件 nginx访问404,403问题
关键挂载 sudo vmhgfs-fuse .host:/musings /home/xxx -o allow_other,uid=0,gid=0
- Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 1.实践目标 掌握信息搜集的最基础技能与常用工具的使用方法. 2.实践内容 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现. ...
- 转:Excel—“撤销工作表保护密码”的破解并获取原始密码
在日常工作中,您是否遇到过这样的情况:您用Excel编制的报表.表格.程序等,在单元格中设置了公式.函数等,为了防止其他人修改您的设置或者防止您自己无意中修改,您可能会使用Excel的工作表保护功能, ...
- MySQL必知必会 前10章学习笔记
1. 在使用用户名和密码登陆MySQL数据库之后,首先需要指定你将要操作的数据库 USE $数据库名称 2. 使用SHOW 命令可以查看数据库和表中的信息 SHOW DATABASES; #列出可用数 ...
- Window服务项目脚手架
本人最近工作用到window服务程序,于是尝试分享下经验,开源了一个window服务脚手架项目,把window服务程序必不可少的组件集成进去,如日志组件log4net,window服务挂在后台,用日志 ...
- Hanlp自然语言处理工具之词法分析器
本章是接前两篇<分词工具Hanlp基于感知机的中文分词框架>和<基于结构化感知机的词性标注与命名实体识别框架>的.本系统将同时进行中文分词.词性标注与命名实体识别3个任务的子系 ...