实时监听input标签输入实时监听文本框输入避免中文输入法无法触发onkeyup事件的问题

前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么完美. Demo: Html5提供了一个标准事件oninput和IE的专属事件onpropertychange事件来监听输入值的变化. <html> <head> <title>搜索</title> </head> <body> <…

苹果手机输入中文不会触发onkeyup事件

今天同事的项目有这个问题,用我的安卓手机输入中文是ok的,但是苹果手机就不行使用keyup事件检测文本框内容: $('#keyup_i').bind('keyup', function(){ $('#keyup_s').text($(this).val()); } 本来是上面这种处理方式,现在改成下面这样就ok了使用oninput以及onpropertychange事件检测文本框内容: //先判断浏览器是不是万恶的IE,没办法,写的东西也有IE使用者 …

实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上并不完善.onpropertychange属性可在…

vue监听input标签的value值方法

<input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/ search: function (event) { //方法一:直接通过event.data…

【学习】文本框输入监听事件oninput

真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus(function(){ $(".pay-btn").attr("disabled",false); }); $(".pay-text").blur(function(){ $(".pay-btn").attr("dis…

监听文本框输入oninput和onpropertychange事件

前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变对象属性,且失去焦点时触发,脚本触发无效:而onkeydown/onkeypress/onkeyup在处理复制.粘贴.拖拽.长按键(按住键盘不放)等细节上并不完善. onpropertychange属性可在某些情…

监听文本框输入开发仿新浪微博限制输入字数的textarea插件

监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘贴(ctrl + v)及鼠标剪切与粘贴时触发(在 IE9 中只在输入.粘贴.鼠标粘贴时触发). onpropertychange 事件在用户输入.退格(backspace).删除(delete).剪切(ctrl + x).粘…

input在输入中文时所触发的事件（防止输入中文时重复执行）

一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想在输入内容是执行相关操作可以使用oninput 但是在文本输入时,如果输入的时汉字,它在拼音拼写的过程中也会执行对应事件,需要解决的就是在汉字文本输入状态不触发事件. 可以使用以下三种事件, compositionstart:一段文字的输入之前触发 compositionupdate:正在输入时触发…

JS和vue文本框输入改变p标签的内容测试

文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给p标签赋值那个文本框的值.效果:输入途中,p标签不会变化,还是原来的内容,当输入的焦点离开文本框时,p标签变成了文本框中的值. 方法2:JS里的oninput,当文本框内容改变事件(不同于上面的,会即时生效),该事件的方法同上.效果:输入途中,p标签也会跟着变化,即时是输入途中也会改变. 方法3:引…

jQuery实现限制input框 textarea文本框输入字符数量的方法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery实现限制input框 textarea文本框输入字符数量的方法</title> </head> <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>&l…

转：zTree树控件扩展篇：巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题所以没有动手处理.今天闲来无事琢磨了一下这个需求.我的解决思路如下所示: 1.监听文本框的onkeyup事件:实时传递其值到某个函数: 2.编写某个函数接收文本框的值通过zTree的模糊查找方法getNodesByParamFuzzy(key,value)获得: 3.将匹配到的节点列表结合重新赋值给…

jquery正则表达式显示文本框输入范围只能输入数字、小数、汉字、英文字母的方法

正则表达式限制文本框只能输入数字许多时候我们在制作表单时需要限制文本框输入内容的类型,下面我们用正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等各类代码.1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">2.只能输入数字,能输…

js入门-文本框输入特定内容控制另一个文本框

在填写表单时,有时需要某些文本框隐藏,当一文本框输入特定内容时才会显示隐藏的文本框,这一功能可以用onchange事件或oninput事件实现.下面对比下两种方法实现的区别: onchange()定义和用法 onchange 事件会在域的内容改变时发生. 本文示例是在A文本框输入A时显示隐藏的文本框B. 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…

转摘：ashx+jquery-autocomplete文本框输入提示功能Asp.net

引入所需文件 <script type="text/javascript" src="JS/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="JS/jquery.autocomplete.min.js"></script> <link href="CSS/jquery.autoco…

HTML如何禁止文本框输入

禁止文本框输入有以下两种方法: 1,设置input为只读状态,代码如下: <input readonly="readonly" value="test1"/> 2,设置input为不用状态,代码如下: <input disabled="disabled" value="test2"/>…

JS文本框输入限制

1上面的文本框只能输入数字代码(小数点也不能输入): CODE: <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 2只能输入数字,能输小数点.(注意汉字.用输入法和复制上面三个是有区别的在这里) CODE: <input onkeyup="if(isNaN(val…

C# Winform 支持Hex与ASCII输入和切换的文本框

最近一直在做一个支持串口,TCP,UDP通讯调试的一体化工具(也就是C#串口调试工具 v2.0的第三版),其中涉及到16进制数据和ASCII码的输入,所以继承了TextBox的基础上,写了这个支持Hex与ASCII输入和切换的文本框. 主要实现了如下功能: 可输入Hex,ASCII 支持复制,粘贴,剪切操作.在粘贴数据时,可自动对输入的数据格式检查. 可切换显示Hex与ASCII的输入文本框 Hex输入时可自动每2个字符之间添加空格本人经过了一些简单测试,目前未发现BUG.如果有什么写的不好,…

分享一个仅0.7KB的jQuery文本框输入提示插件

由于项目需要,找过几个jQuery文本框输入提示插件来用,但总是有不满意的地方,要么体积较大,要么使用不便,要么会出现把提示文字作为文本框的值的情况.于是我们自己的开发团队制作了这个最精简易用的输入提示插件,现分享给大家: 截图: 插件名称:jQuery TbTips插件版本:V1.0官方网站:http://landian.cc最后更新:2014-1-21 简介: 这款插件的min版本仅0.7KB,其实现的效果是:文本框聚焦时提示文字消失,失去焦点时在文本框中显示提示文字. 用法示例一:$("#…