实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言：
对于实时监听输入，这种需求大多数都是用于一个联想字提醒，智能提醒。大家都知道onkeydown，onkeypress，onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端，不是那么完美。
Demo：
Html5提供了一个标准事件oninput和IE的专属事件onpropertychange事件来监听输入值的变化。
<html>
<head>
<title>搜索</title>
</head>
<body>
<input type="text" id="search_input">
<span id="inputorp_s"></span> <script src="./jquery.js"></script>
<script>
$(function () {
//判断浏览器是IE?
if (navigator.userAgent.indexOf("MSIE") != -1) {
$('#search_input').bind('propertychange', getSmartTips);
} else {
$('#search_input').bind('input', getSmartTips);
}
}); function getSmartTips() {
$('#inputorp_s').text($(this).val());
//todo:用ajax去后台拿智能联想数据
}
</script>
</body>
</html>
实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题的更多相关文章
- 苹果手机输入中文不会触发onkeyup事件
今天同事的项目有这个问题,用我的安卓手机输入中文是ok的,但是苹果手机就不行 使用keyup事件检测文本框内容: $('#keyup_i').bind('keyup', function(){ ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- vue监听input标签的value值方法
<input id="materialSearch" type="text" @keyup.enter="search" @input ...
- 【学习】文本框输入监听事件oninput
真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- input在输入中文时所触发的事件（防止输入中文时重复执行）
一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...
- JS和vue文本框输入改变p标签的内容测试
文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...
- jQuery实现限制input框 textarea文本框输入字符数量的方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- File类和时间类的两道综合练习
练习1: 获取指定目录下(包含子目录)所有的某一种类型的文件 分析: 1.指定路径并获取其下的文件对象 2.要判断给定的目录是否为空 3.要判断给定路径下获取的目录是否为空 4.判断是否是某种文件 5 ...
- SDWebImage下载图片的使用
第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...
- ST HW1 An Error
曾经使用ThinkPHP完成一个网上电子银行的项目,凡是涉及到金钱的,需要注意的问题很多,比如使用float类型,比如金钱的数额不能为负数等等.最初没有考虑到剩余金额不能为负数或者消费的金额不能为负, ...
- selenium+python 自动化中界面滚动条操作方法
虽然webdriver提供了操作浏览器的前进和后退的方法,但对于浏览器滚动条并没有提供相应的操作方法,以下使用的方法: 借助JavaScript来控制浏览器的滚动条,webdriver提供了execu ...
- Web API框架学习——路由（一）
HttpConfiguration(ASP.NET Web API管道的配置是通过HttpConfiguration来完成) : 包括路由注册在内的对整个ASP.NET Web API管道的配置是通过 ...
- jQuery遮罩插件 jquery.blockUI.js
Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...
- springmvc基础学习3---注解简单理解
1:@Controller 用来注解这个bean是MVC模型中的一个C 会被spring的auto-scan扫到纳入管理.Spring mvc框架中的action层注入,也就是控制层.控制器Contr ...
- 解决Antimalware Service Executable CPU占用高听语音
windows8/8.1,WIN10自带的安全软件Windows defender还不错,基本可以不用装其他杀毒软件了. 但是其进程Antimalware Service Executable 出现C ...
- 【转】Objective-C Runtime
之前在找Runtime资料,这篇条理是相对比较清晰,对我最有启发的一篇,转载以作记录. 对于iOS小白,值得多看几遍,会有不少收获. --------------------------------- ...
- Java线程池使用和分析(一)
线程池是可以控制线程创建.释放,并通过某种策略尝试复用线程去执行任务的一种管理框架,从而实现线程资源与任务之间的一种平衡. 以下分析基于 JDK1.7 以下是本文的目录大纲: 一.线程池架构 二.Th ...