【HTML】＜input＞限制字符输入

有时候我们希望限制一个特殊字符输入

1. 如果仅仅是可以输入数字，那么我们可以直接在type那些限制

<input type="number"/>

这样在这个输入框中就只能输入数字，其他都会别限制住。

2. 如果限制的是一些特殊符号，最主要是为了防止注入攻击，可以采取以下的方法：

（1）使用onkeypress

<input type="text" onkeypress="fun()"/>

<script>
    function fun(){
        if( ){   // 判断条件
            return (event.returnValue = false)  //就是这是输入会被限制住
        }
    }

</script>

对于如何处理判断条件的问题

- 直接读取对于的 keycode，写法就是 event.keyCode

- 将keyCode转换为对于的值，可以使用 String.fromCharCode()，将对于的键值转换文对应的文本，

同时这个方法可以解决复制粘贴的问题，因为将文本复制到这个边框的时候，下面的方法是无法排除的，这个方法可以，使用正则时候需要在表达式的最后使用全局变量，否则只能过滤一部分

/条件/g

(2) 使用onkeyup

<input type="text" id="text_input" onkeyup="fun()"/>

<script>
    funciton fun() {
        const filterCondition = ''//根据自己的需求写，正则可以表示成 /[!&#@]/
        const tile = document.querySelector('#text_input');
        tile.valuse = tile.valuse.replace('filterCondition','');
    }
</script>

这种方式就是会有闪动，就是等你输入以后再删除，比较适合粘贴以后，有特殊字符帮你过滤，直接输入，就需要添加提示吧，不然用户输入一个值以后都不知道你为什么闪掉，会很影响用户体验的。

（3）onkeydown

这个方法和onkeypress有点类似，但是他实现上最主要是通过监听，他的控制主要通过

event.preventDefault();

不过不同的是 onkeypress是字母或数字键盘被按下时才触发（ctrl shift这些不会触发）

而onkeydown是键盘上所有的按键被按下时都会触发，而且字母不区分大小写