oninput事件

oninput事件js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变。由于是手机端页面没有考虑IE这货。js代码如下://计算文本输入统计(function

大家好,又见面了,我是你们的朋友全栈君。

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)

关于这个事件的更多知识,可以阅读下面的文字,我们感谢写下下面文字的兄弟。懒人建站整理。

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了。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/132000.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • awk linux 数组,Linux中的awk数组的基本使用方法

    awk linux 数组,Linux中的awk数组的基本使用方法1.awk数组描述在其他的编程语言中,数组的下标都是从0开始的,也就是说,如果想反向引用数组中的第一个元素,则需要引用对应的下标[0],在awk中数组也是通过引用下标的方法,但是在awk中数组的下标是从1开始的,在其他语言中,你可能会习惯于先“声明”一个数组,在awk中,则不用这样,直接为数组的元素赋值即可(其实如果自己给数组赋值,下标从1或者从0开始那就无所谓了!)2.在声明数组时,可能值很多…

  • spdlog使用示例「建议收藏」

    spdlog使用示例「建议收藏」////Copyright(c)2015GabiMelman.//DistributedundertheMITLicense(http://opensource.org/licenses/MIT)//spdlogusageexample/*参考文献https://blog.csdn.net/haojie_superstar/article/details/89383433?ops_request_misc=&request_id=&biz_id=102

  • MySQL二进制日志格式类型详解「建议收藏」

    MySQL二进制日志格式类型详解「建议收藏」mysql很多有类型的日志,按照组件划分的话,可以分为服务层日志和存储引擎层日志:-服务层日志:二进制日志、慢查日志、通用日志-存储引擎层日志:innodb(重做日志、回滚日志)其中比较重要的就是服务器层的二进制日志,其中记录了所有对mysql数据库的修改事件,包括增删改查事件和对表结构的修改事件。要注意的一点是,只有成功执行了的事件才会记录在二进制日志中,未执行成功的不会保存

  • pycharm里为啥运行不了pip_error loading package list:pypi

    pycharm里为啥运行不了pip_error loading package list:pypi安装好了python以及pycharm,添加pysql时,第一次出现错误是pip版本不匹配,当前版本是9.0.1,需要更新至版本。更新版本需要找到easy_install.exe,在终端中执行:pipinstallpip–upgrade即可首先终端可用快捷键win+R打开,输入“cmd”,由于我的python是2.7版本,安装在D盘,输入“D:”,按enter键,继续输入“cdp…

  • python之路

    python之路

  • DOS命令COPY与XCOPY有什么区别「建议收藏」

    DOS命令COPY与XCOPY有什么区别「建议收藏」内部命令COPY与外部命令XCOPY在作用及使用方法上有什么区别?首先说一下内外部命令的区别,内部命令是在启动DOS后调入计算机内存中常驻的,外部命令是刻在磁盘上面的,使用时内部命令可以在每一个盘符下从内存直接执行,而外部命令执行时除了外部命令所在目录及设定好路径的盘符下执行外,在其它位置执行都需要指明此命令所在路径,执行时都是从磁盘调入内存来执行。至于COPY和XCOPY的区别是:用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号