实时监听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> ...
随机推荐
- java 类与类之间的关系 及uml图
类与接口之间的关系 : 继承 类与类之间的关系 :继承关系 包含关系 类与对象之间的关系 : 实例 UML 类图中类与类之间的关系: 泛化关系(generalization) 关联关系(associ ...
- BMP图片格式模型（2）
因为公司的主要业务是图像识别相关的,因此对图像处理.识别是我学习的重点.虽然写程序也不少年了,但是对于图像处理领域,我还是一个新兵.对很多基础的概念也还是存在盲区,所以想在边学边做的过程中,对一些概念 ...
- CAEmitterLayer 粒子效果(发射器)
//创建Layer CAEmitterLayer *emitterLayer = [CAEmitterLayer layer]; //边框 emitterLayer.borderWidth = 1.0 ...
- python 语法笔记（一）
#python3里面input默认接收到的事str类型,而python2里面却认为是int类型n=int(input('请输入想要第几个数')) #如果将int省去,python3中该程序将会报错a, ...
- 使用git部署服务器
每回上传服务器是把我的web项目打包成war上传到服务器根目录下,总是觉得很麻烦,并且每次就算只添加或修改了一个文件,都要把整个服务器war包上传.于是我学着用git部署我的web项目 下面是详情: ...
- C++基础——C面向过程与C++面向对象编程01_圆面积求解
#include "iostream";//包含C++的头文件using namespace std;//使用命名空间std标准的命名空间(在这个命名空间中定义了很多标准定义)vo ...
- iOS开发之Autolayout
1.概述 在以前的iOS程序中,是如何设置布局UI界面的? (1)经常编写大量的坐标计算代码 (2)为了保证在3.5 inch和4.0 inch屏幕上都能有完美的UI界面效果,有时还需要分别为2种屏幕 ...
- iOS开发之UINavigationController
1.概述: 利用UINavigationController,可以轻松地管理多个控制器,轻松完成控制器之间的切换,典型例子就是系统自带的“设置”应用. 2.UINavigationController ...
- calling c++ from golang with swig--windows dll 二
Name mangling && Name demangling 在讲述golang如何利用swig调用windows dll之前,需要了解一个概念:Name Mangling (或者 ...
- java入门了解02
1:JDK,JRE,JVM的作用关系 (一)作用 JVM:提供java跨平台 JRE:java运行环境 JDK:java开发环境 ...