This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

1. Disable the input method

Turning off the input method when typing E-mail and web addresses can prevent users from typing errors. The main techniques for disabling input methods are CSS special attributes and JavaScript event text filtering.

Embed CSS special properties
function banInputMethod (_elementArr) {
    var arr = _elementArr,
        self = this;

    // Check whether the element is an array. If not, make it an array
    if(! (_elementArrinstanceof Array)) {
        arr = [_elementArr];
    };
    for (var i = 0, arrLen = arr.length; i < arrLen; i++) {
        var arrI = arr[i];
        arrI.onfocus = function () {
            // Only compatible with browsers other than Chrome
            this.style.imeMode = 'disabled'}}}Copy the code
  • instanceofUsed to determine whether a value is an instance of an object;
  • imeModeAttribute Reference:auto(Indicates that the input method is enabled, default value)active(Represents the input method is Chinese)inactive(Represents the input method in English)disabled(Indicates to close the input method)
Event text filtering
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); }}}Copy the code
  • Blur and keyUp events to check whether there are Chinese characters;
  • The clearChinese() function clears Chinese characters.

2. Do not copy or paste

Although copy and paste is convenient for some daily operations of netizens, sometimes websites need to prohibit users from performing these operations in order to protect copyright and prevent users from spreading the text they are browsing freely through copy and paste.

var banCopyPaste = document.getElementById("banCopyPaste");
banCopyPaste.oncopy = function () { // Disable replication events
    return false;
}

banCopyPaste.onpaste = function () { // Forbid pasting events
    return false;
}
Copy the code

3. Right-click

It is also to prevent the copying of some copyrighted novels, prohibit the viewing of source code, prevent code leakage and other scenarios.

<input type="button" id="shieldingRight" value="Turn on the shield">
Copy the code
window.onload = function () {
    document.getElementById("shieldingRight").onclick = function () {
        if (this.value == 'Blocking has been enabled') {
            return;
        }
        this.value = 'Blocking has been enabled';

        document.oncontextmenu = function () {
            alert("No right mouse menu!")
            return false; // Disallow if false is returned}}}Copy the code
  • oncontextmenuEvent to disable right-click, specify the element bind to this event and return false to disable function;