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)
blank

相关推荐

  • WPF实现选项卡效果(1)——使用AvalonDock

    WPF实现选项卡效果(1)——使用AvalonDock简介  公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果。搜寻诸多资料后,发现很多同仁推荐AvalonDock这款开源控件。在其官方地址下载源码和Demo后,对其进行了初步的研究,初步实现了预期效果。  完整系列  ●第一部分  ●第二部分  ●第三部分  在Git中下载工程源码AvalonDocking的结构树  在下载的Dem

  • oracle11g安装完成如何打开界面

    oracle11g安装完成如何打开界面找到oracle11g的安装路径下的tnsnames.ora复制该文件到下面对应的文件替换即可(该文件(压缩包名instantclient_11_2可以自己下载,也可以向我要qq1406697403,下载后任意建一个文件夹如本文oracle11,将该压缩包解压后放到其中)然后做替换(看图)准备好plsql打开如下设置如:现在可以登录了!

  • 【转载】C#中的泛型

    【转载】C#中的泛型

    2021年11月20日
  • python skitlearn_Python sklearn

    python skitlearn_Python sklearn1.Sklearn简介Scikit-learn(sklearn)是机器学习中常用的第三方模块,对常用的机器学习方法进行了封装,包括回归(Regression)、降维(DimensionalityReduction)、分类(Classfication)、聚类(Clustering)等方法。当我们面临机器学习问题时,便可根据下图来选择相应的方法。Sklearn具有以下特点:简单高效的数据挖…

  • 如何注册免费域名

    如何注册免费域名首先,你需要一个域名,如果你自己买的有域名,那么这里我再说就没太多意义了,这里要说的是用免费的域名,是的,你没有看错,免费的域名首先登陆https://my.freenom.com网站注册个用户,当然了也可以先不用注册,如果想跟着本教程走,则最好是先不要注册用户(有Google账户的小伙伴可以直接登陆了)然后就是想个你要注册的域名,搜一下(注:只有.tk、.cf、.ml、.ga、….

  • 多线程案例:生产者和消费者

    多线程案例:生产者和消费者

发表回复

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

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