实时监听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> ...
随机推荐
- 【JS】JavaScript中的参数传递
ECMAScript中所有函数的参数都是按值传递的,简单讲就是函数外部的值 复制给函数内部的参数,就和把值从一个变量复制到另一个变量一样.切记访问变量有按值访问和按引用访问,而参数只能按值传递. 在向 ...
- NDK 开发实例二（添加 Eigen库）
上一篇,我已经阐述了如何创建一个简单的NDK实例: NDK 开发实例一(Android.mk环境配置下) 在上一篇的基础上,我们来添加Eigen库,然后做一个简单实例. Eigen是一个高层次的C + ...
- KVC与KVO理解
转载:https://magicalboy.com/kvc_and_kvo/ KVC 与 KVO 理解 KVC 与 KVO 是 Objective C 的关键概念,个人认为必须理解的东西,下面是实例讲 ...
- python中的I/O
先看比较简单的,标准输入输出流 输出到表屏幕: >>>str = "hello, python" >>>print "content: ...
- 看了一个烟花的html作品 --引用：http://www.w3cfuns.com/blog-5444049-5404365.html
最近老大想把项目改成响应式,一直在学习没时间更新博客.今天看到一个原生的js烟花项目,感觉很好,把记下来,以后把妹用. [run]<!DOCTYPE html><html>&l ...
- quartz笔记
首先网络上的很多教程经常有错(信息过载了),其主要原因是版本发生了变化,例如quartz1和2之间还是有不少差别的,导致查找资料的人浪费了不少时间.所以无论教程如何写,都建议读者首先学习官网的教程,如 ...
- （转）KMP算法实现。超级赞！见过的最容易理解的
网上有很多讲解KMP算法的博客,我就不浪费时间再写一份了.直接推荐一个当初我入门时看的博客吧:http://www.cnblogs.com/yjiyjige/p/3263858.html这位同学用详细 ...
- React-native 初始化项目很慢
我是在Mac环境下,利用facebook开源的react-native创建原生app项目缓慢的问题 一:确定自己的环境配置是否有问题 二:打开终端,输入命令行 brew install wget 点击 ...
- reactjs点滴记录
reactjs: render方法后面,}后面,不要加分号,加逗号,因为是对属性赋值,否则报错: var Test = React.createClass({ render:function(){re ...
- 持续集成：TestNG组织如何测试用例 1
持续集成:TestNG组织如何测试用例 poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90 ...