input的onchange 和oninput事件

白昼怎懂夜的黑 提交于 2020-03-27 18:48:02

一个小的功能,也体现了了这几天写程序过程中的遇到的一些常发事件,准备有时间研究一下jQuery和原生js,问题的出现:使用jQuery获取到的节点到底是属于什么,有些事件

居然不能用,就如我今天用到的事件 onchange 和oninput ,还有对于onclick 和click,

先总结一下这个小小的功能:输入框要输入money,那就只有两位小数,我们要确保输多位小数时,不让他提交,提交按钮变灰色,当小数点后是两位则回复按钮状态,

onchange事件,监听input 输入的值是否符合要求,不符合则改变按钮状态:代码如下:

bid.onchange=function(){
        var num = bid.value;
        var dot = num.split('.');
        if(dot[1]!=null){

            if(dot[1].length>2){
                var addbtn = document.getElementById("addbtn");
                addbtn.setAttribute("disabled",true);
                alert("请保留两位小数");
            }
        }
    }

oninput事件,随时监听input输入的值,小数点后的位数,当时两位时,按钮回复状态:代码如下:

bid.oninput=function(){
        var num = bid.value;
        var dot = num.split('.');
        if(dot[1]!=null){

            if(dot[1].length<=2){
                var addbtn = document.getElementById("addbtn");
                addbtn.removeAttribute("disabled");
            }
        }
    };

说一下两个事件的区别:onchange 当文本框失去焦点时,检查input里的值是否符合要求,执行函数

           oninput 实时监听文本框的值,不符合要求事件触发,(但是虽不符合要求,值却已经在文本框了)这就为什么两个事件得同时用

待续。。。jQuery和原生js 对事件的操作支持:

 

  这篇文章的前部分很早就写完了,最近才明白了,不是jquery和js的问题,是DOM的问题,以前没意识到这个问题,最近搞清楚了(和别人讨论问题时,提到了)恍然大悟,犹如醍醐灌顶值功效。哈哈,感觉使用jquery瞬间轻松了好多,这种感觉是只有个我这种菜鸟才能感受的。

  首先,jquery和DOM 他们各自的属性方法是不能混用的,简单说,jquery是方法,DOM是属性,

    我们使用dom获取属性节点,使用jquery方法操作节点,和平共处。

  然后,就涉及相互转换的问题,看了一些资料,表达一下自己最切实的理解。

    使用$("**")获取节点,就是jquery对象,使用jquery的方法属性,

    使用$("**")[index]这样,就变成了DOM对象,使用DOM方法和属性。

    使用$($("**")[index]),转换成jquery对象,使用jquery的方法。

  三句切实理解jquery和DOM的操作方式,希望以后在前端的道路上,勇往直前!

 

 

有什么问题,欢迎吐糟,共同进步!

<h2>现阶段目标:能用代码量解决的问题,就不是问题!</h2>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!