js监听input等表单输入框的改动事情oninput-前端路上

注册 欢迎您:[USERNAME][USERID] [用户中心] [退出]
当时方位:前端路上>>jquery 学习>> js监听input等表单输入框的改动事情oninput
楼主 [回复] [修正] 作者: 314-03-29

js监听input等表单输入框的改动事情oninput,手机页面开发中运用到文本框textarea输入字符监听文本框改动核算还能够输入多少字符,假如运用onkeyup的话是无法监听到输入法输入的文本改动的,复制粘贴也不能监听到,所以就用到了oninput事情来监听文本框value值的改动。由所以手机端页面没有考虑IE 这货。

js代码如下:

//核算文本输入核算
(function textCoun(textarea,num){
    var sendTextarea     =     document.getElementById(textarea),
        text            =    sendTextarea.value,
        counter            =    text.length,
        sendCount         =     document.getElementById("send-count");
    
    sendCount.innerHTML = num-counter;    //显现初始状况还归于多少字
    
    //输入今后从头核算
    sendTextarea.oninput = function(){
        text    =    sendTextarea.value,
        counter    =    text.length;
        sendCount.innerHTML = num-counter;
    }

})("send-textarea",110)

关于这个事情的更多常识,能够阅览下面的文字,咱们感谢写下下面文字的兄弟。bodog官网收拾。

oninput,onpropertychange,onchange的用法

onchange触发事情有必要满意两个条件:

a)当时目标特色改动,并且是由键盘或鼠标事情激起的(脚本触发无效)

b)当时目标失掉焦点(onblur); 

onpropertychange的话,只需当时目标特色发作改动,都会触发事情,可是它是IE专属的;       

oninput是onpropertychange的非IE浏览器版别,支撑firefox和opera等浏览器,但有一点不同,它绑定于目标时,并非该目标一切特色改动都能触发事情,它只在目标value值发作改动时见效。

中止冒泡事情

if (e) //中止事情冒泡 e.stopPropagation(); 

else  window.event.cancelBubble = true;

履行上面的代码,单击输入框发现也会触发onpropertychange,输入一个值相同也会触发这个事情,这就证明了,只需有特色的值被修正就会触发该事情。

第二、已然咱们发现了这个特色,那就会有一个问题了:当咱们有时在输入框值发作改动时期望履行一个函数操作,但一起也要修正一个自界说的特色,这样onpropertychange就会被触发两次,这个或许并不是咱们所期望的。
猜测一下,已然供给了这么一个特色,那必定应该能获取到是哪个特色被改动了。试着获取参数个数及参数内容。

js监听input等表单输入框的改动事情oninput

履行一下,发现有很多个特色,但仔细看咱们或许会发现这么一个特色:propertyname,信任每个人都能猜到这个特色的意思了。对,这个便是用来获取哪个特色被修正的。

js监听input等表单输入框的改动事情oninput

再回到咱们开端的问题js监听input等表单输入框的改动事情oninput,咱们只需要判别是否是value被改动就ok了。
直接看代码吧:

前端路上修正

< 上一页 1 下一页 >
×
假如你有疑问:请点击→[发问] 来让更多的人来协助你! 假如你得到了协助:请点击→[回复] 假如你有更好的解决方案:请点击→[共享] 来协助更多的人! 假如你有好东西、好常识:请点击→[新建论题] 来共享给更多的人!