JavaScript 常用代码段（二）

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

1. 关闭输入法

在输入 E-mail、网址时关闭输入法可以防止用户输入错误。主流的禁用输入法的技术是利用 CSS 的特殊属性和 JavaScript 的事件文本过滤技术。

植入 CSS 特殊属性

function banInputMethod (_elementArr) {
    var arr = _elementArr,
        self = this;

    // 判断元素是否为数组，如果不是数组将其变成数组
    if (!(_elementArr instanceof Array)) {
        arr = [_elementArr];
    };
    for (var i = 0, arrLen = arr.length; i < arrLen; i++) {
        var arrI = arr[i];
        arrI.onfocus = function () {
            // 只兼容除了 Chrome 浏览器之外的浏览器
            this.style.imeMode = 'disabled'
        }
    }
}

• instanceof 用于判断一个值是否为某个对象的实例；
• imeMode 属性参考：auto（表示打开输入法，默认值） active（代表输入法为中文） inactive（代表输入法为英文） disabled（表示关闭输入法）

事件文本过滤

var arr = [document.getElementById("banInputMethodgoogle"), document.getElementById("banInputMethod")],
    self = this;

for (var i = 0, arrLen = arr.length; i < arrLen; i++) {
    var arrI = arr[i];
    arrI.onfocus = function () {
        this.style.imeMode = "disabled";
    }

    var banInputMethod = arrI.getAttribute("banInputMethod");
    if (banInputMethod) {
        var clearChinese = function (_this) {
            var _v = this.value;
            _this.value = _v.replace(/[\u4e00-\u9fa5]/g, "");
        }
        arrI.onkeyup = function () {
            clearChinese(this);
        }
        arrI.onblur = function () {
            clearChinese(this);
        }
    }
}

• blur 和 keyup 事件，检测是否含有中文字符；
• clearChinese() 函数清除中文字符；

2. 禁止复制和粘贴

复制和粘贴虽然方便了网民的一些日常操作，但是有时候网站为了保护版权需要禁止用户执行这些操作，防止用户将正在浏览的文本，通过复制、粘贴的方式随意传播。

var banCopyPaste = document.getElementById("banCopyPaste");
banCopyPaste.oncopy = function () { // 禁止复制事件
    return false;
}

banCopyPaste.onpaste = function () { // 禁止粘贴事件
    return false;
}

3. 屏蔽右键

同样也是为了防止复制一些有版权保护的小说、禁止查看源代码、防止代码泄漏等场景。

<input type="button" id="shieldingRight" value="开启屏蔽">

window.onload = function () {
    document.getElementById("shieldingRight").onclick = function () {
        if (this.value == '已经开启屏蔽') {
            return;
        }
        this.value = '已经开启屏蔽';

        document.oncontextmenu = function () {
            alert("禁止鼠标右键菜单！")
            return false; // 返回 false 则禁止
        }
    }
}

• oncontextmenu 事件为禁止右键单击，指定元素绑定此事件并且返回 false 即可实现禁止功能；