• 文本框脚本


    过滤输入经常应用的场合是,限定文本框的输入特定数据,或者输入特定格式的数据。

    当输入那离不开键盘,当然也不开这三个事件:

      keydown

      keypress

      keyup

    先来看看这些事件的顺序:

        textbox.addEventListener("keyup",function(){
            console.log("keyup"); //3
        },false);
        textbox.addEventListener("keydown",function(){
            console.log("keydown");//1
        },false);
    
        textbox.addEventListener("keypress",function(){
            console.log("keypress");//2
        },false);

    既然我们要过滤某些内容,那必须知道我们按下的是什么?

    这个可以根据事件对象中的一个属性,在 IE9+ Firefox Safari Chorme Opera中 可以通过charCode获取。

      在IE8以及低版本 以及Opera,不支持该属性,则提供 keyCode,不管哪个属性值,只有 在 keypress 事件时事件对象中才会包含该属性。

    下面来看看具体获取 keyCode 或 charCode 的方式

      

        function addHandler(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+ type,handler);
            }else{
                element["on"+type] = handler;
            }
        }
        function getEvent(event){
            return event?event:window.event;
        }
    
        function getCharCode(event){
            event = getEvent(event);
            if(event.charCode){
                console.log("Chrome"+ event.charCode);
            }else if(event.keyCode) {
                console.log("IE Opera" + event.keyCode);
            }
        }
        var textbox = document.forms[0].elements[0]; //123
        addHandler(textbox,"keypress",function(event){
            console.log(getCharCode(event));
        });

    上面主要是兼容了各种浏览器,主要是对IE、Chrome、Safari、Forfix、Opera

      key(按键)- 对应的ISC码值  - 通过 String类的fromCharCode 作为转换成对应的字符串形式

    实例一:  屏蔽字符

      

        var textbox = document.forms[0].elements[0]; //123
        addHandler(textbox,"keypress",function(event){
            event = getEvent(event);
            var code = getCharCode(event);
            if(!/d+/.test(String.fromCharCode(code))){
                preventDefault(event);
            }
        });
  • 相关阅读:
    [LeetCode] 493. Reverse Pairs 翻转对
    [LeetCode] Super Washing Machines 超级洗衣机
    [LeetCode] Perfect Number 完美数字
    [LeetCode] 483. Smallest Good Base 最小的好基数
    [LeetCode] Sliding Window Median 滑动窗口中位数
    [LeetCode] Diameter of Binary Tree 二叉树的直径
    [LeetCode] 01 Matrix 零一矩阵
    [LeetCode] Convert BST to Greater Tree 将二叉搜索树BST转为较大树
    [LeetCode] Reverse String II 翻转字符串之二
    [LeetCode] Minimum Time Difference 最短时间差
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5721692.html
Copyright © 2020-2023  润新知