HTML文本框内容发生变化时引发事件执行

原创 2013年12月05日 17:04:52

最近在做的程序中需要这样的一个功能:当HTML文本框内容生发变化时执行JavaScript函数.

最初的想法是使用onchange,但这个事件只有当文本框失去焦点时才会触发,后来就找到了onpropertychange事件.如下:

<input id="textRoad" type="text" size="15" onpropertychange="alert(this.value);">


但很快发现存在问题.在使用微软拼音输入法和部分五笔输入法时,每次有键按下都会触发onpropertychange事件.

想来想去,改于onkeyup事件加判断条件来处理,代码如下:

<SCRIPT language="JavaScript">
var sOldValue;
sOldValue = "";

function tttt(vNewValue)
{
    //alert(vNewValue);
    if (sOldValue != vNewValue)
    {
        alert(vNewValue);
        sOldValue = vNewValue;
    }
}
</script>
<body">
<!--<input id="textRoad" type="text" size="15" onpropertychange="alert(this.value);">-->
<input id="textRoad" type="text" size="15" onKeyUp="tttt(this.value)">
</body>


由一个变量sOldValue记录文本框原始值,onKeyUp时,判断新值与原始值比较是否有发生变化.若有变化时,执行相应的处理.

现在基本实现了要达到的目标.唯一的遗憾是:微软拼音比较诡异,是先把字输入到文本框,再由用户选择,再修改文本框内的值.
版权声明:本文为博主原创文章,未经博主允许不得转载。

input标签内容改变的触发事件

onchange事件与onpropertychange事件的区别:  onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发;onpropertychange事件是实时触发,每增加或删除...
  • MisTTT
  • MisTTT
  • 2017年06月20日 17:46
  • 941

html中input标签内容改变触发事件

在我的页面上,input标签使用的是弱选择类型,可以选择,也可以输入。然后 ,触发事件的话,用onblur的话,选择时触发的事件会有问题,用onchange的话,输入时触发事件会有问题。然后在实现的时...
  • zhang__hang
  • zhang__hang
  • 2017年12月27日 17:06
  • 138

[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍

js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导...
  • Stu_zkl
  • Stu_zkl
  • 2016年11月18日 20:47
  • 7248

JS来判断文本框内容改变事件

oninput,onpropertychange,onchange的用法        onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无...
  • hsliwei
  • hsliwei
  • 2011年06月22日 16:14
  • 30404

[事件处理] js实现的文本框内容发生改变立马触发事件简单介绍

js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导...
  • Stu_zkl
  • Stu_zkl
  • 2016年11月18日 20:47
  • 7248

jquery文本框改变事件

可参考如下几个事件: TEXTBOX EVENT $(document).ready(function(){ //按键弹起时触发事件 $("#mytext").ke...
  • sudazf
  • sudazf
  • 2015年09月10日 23:00
  • 7890

有关input输入框内容改变后的触发事件

有关input输入框内容改变后的触发事件,也是今天遇到的问题。我使用时间插件为输入框填充内容,想实现输入框内容改变后执行相应的方法,发现使用change方法没有反应。百度了半天,最后才发现问题所在。我...
  • yyc13579
  • yyc13579
  • 2017年08月02日 22:05
  • 2709

input输入框和textarea文本框的value改变事件

如果写过检测input或者textarea输入框文本检测的人一定知道onchange或者jq的change方法检测文本变化是检测不到的,因为该事件是在文本框获得焦点,并且改变其中的内容之后再失去焦点才...
  • qq_22855325
  • qq_22855325
  • 2017年06月03日 11:46
  • 2902

JSP中input内容改变触发onchange事件使用

最近做的一个成绩的比例添加的功能,需求是平时比例和期末比例为100%,而为了减少让用户的思考,让界面更人性化,其实我们可以在输入平时比例时,期末比例自动加载,这时就要使用jsp中input的内容改变需...
  • u010097777
  • u010097777
  • 2016年04月01日 12:17
  • 10112

js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange

(1)     先说jquery, 使用 jQuery 库的话,只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码: $('#usern...
  • smeyou
  • smeyou
  • 2014年03月24日 01:17
  • 25510
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML文本框内容发生变化时引发事件执行
举报原因:
原因补充:

(最多只允许输入30个字)