键盘事宜与文本框变化的历程

键盘事宜最基础的运用场所是掌握文本框元素，而我们要议论的，就是几个键盘事宜：keydown、keypress、keyup、textInput发作的机遇与文本输入的历程的关联。先看一段代码：

    <input type="text" id="input"></input>
    <script>
        var input = document.getElementById('input');
        input.addEventListener('keydown', function() {
            console.log('keydown');
        }, false);
        input.addEventListener('keypress', function() {
            console.log('keypress');
        }, false);
        input.addEventListener('keyup', function() {
            console.log('keyup');
        }, false);
        input.addEventListener('textInput', function() {
            console.log('textInput');
        }, false);
    </script>

检察掌握台能够看到键盘事宜的实行递次，这里事宜的实行分为两种状况，一种是按下字符键，chrome下实行的递次为keydown->keypress->textInput->keyup，假如根据不放就交替实行keydown和keypress；另一种是按下非字符键，chrome下实行递次为keydown->keyup，假如按着不放就不停地实行keydown。

事宜的递次搞清楚了，但我们还要看清键盘事宜发作与文本框变化的递次。把上面代码中的每一个事宜处置惩罚顺序再加一句console.log(input.value)，按一个字符。能够看到，除了keyup外，keydown、keypress、textInput事宜并不会输出刚按下的字符，申明他们在文本框变化之前发作而keyup在以后发作。进一步地，也能够给每一个事宜加个alert()看看，虽然由于alert()的滋扰致使keyup不发作（单步调试得出的结论），但如许一步步实行也能直观看出上面的结论。

理清这些关联有什么用呢？固然是为了起前端工程的一大目的：做出更好地交互。比方你要做个有关键词提醒的搜刮框，由于只需keyup事宜是在文本框变化后触发的，也就意味着弹出提醒的代码只需挂在keyup事宜上才能在输入字符后猎取到输入框最新的value，而挂在其他事宜上就会涌现提醒与输入慢半拍的诡异征象。

末了要注重，虽然各浏览器基础遵照上面的事宜实行递次，但差异浏览器对键盘事宜的完成仍有差异，比方火狐和IE并不支撑textInput事宜；而同时关于非字符键，也不一定就按上面提到的只相应keydown和keyup，比方在火狐下按backspace键也具有字符键的行动。

对用户输入字符举行正则转义

数据交互的牢靠与安满是前端工程须要斟酌的重要一环，我们的用户既能够输入一段有歧义的字符，也随时能够给你来段sql注入或xss，这里我也碰到一个简单点的情形：怎样拿用户输入的内容来构建有用的正则举行查询。

斟酌到用户能够会输入一些正则的专用标记，假如不对这些标记举行转义就直接把全部字符串拿去组织正则，那必将会使查询结果背叛我们的本意。正则表达式里对特殊标记转义只需在前面加\，所以思绪就是将源字符串中的特殊标记替代为\待转义字符。完成以下：

    function transfer(string) {
        return string.replace(/[\.\/\\\^\$\*\+\?\[\]\(\)]/g, '\\$&');
    }

用到了字符串的replace要领，第一个参数一个是全局婚配一切待转义字符的正则；第二个参数是个$表达式，$&猎取一切与正则相婚配的子串，注重这里要在其前面加上\\而非\，由于在一般字符串里运用\也得写为\\举行转义。

能够有人会问，$&不是相当于RegExp.lastmatch婚配近来一次婚配项吗，为什么运用它猎取全局正则的一切婚配项？

能够这么想，replace对全局正则婚配项的替代是逐一举行的，每婚配一个子串就用第二个参数的划定规矩替代一次。所以用$&每次替代近来一次婚配项，也就能抵达看起来一次替代了全局正则的一切婚配项结果。