文章/答案/技术大牛

发布

社区首页 >问答首页 >如何禁用分隔输入字段上的javascript效果？

问如何禁用分隔输入字段上的javascript效果？
EN

Stack Overflow用户

提问于 2020-08-25 03:19:23

回答 1查看 49关注 0票数 0

这是在每个输入和文本区域字段中打开乔治亚语键盘的Javascript

但是我有一个输入字段，它的类型是文本，它的ID为user_login，当然，这个javascript对这个字段也有效，我只是想禁用这个javascript只对ID为user_login的字段的效果

请帮我提前谢谢

HTML

<!DOCTYPE html>
    <html>
    <head>
<title></title>
<link rel="stylesheet" type="text/css" href="jquery.geokbd.css">
<script type="text/javascript" src="/js/jquery_min.js"></script>
<script type="text/javascript" src="jquery.geokbd.js"></script>
    </head>
    <body>

<div class="gk-switcher">
<input id="kbd-switcher" type="checkbox">
</div>

<form>
    <input type="text" placeholder="Title">
    <input type="text" placeholder="Description">
    <input placeholder="Password" type="password">
    <input placeholder="Email" type="email">
</form>

    <input placeholder="Email" type="email">
    <input placeholder="About me" maxlength="11" type="text">
    <input placeholder="Username:" type="text" name="user_login" id="user_login" class="wide">

    <script>
$('#kbd-switcher').geokbd();
    </script>

    </body>
    </html>

和代码

(function($, undefined) {

$.fn.geokbd = function(options) {
    var 
    isOn, 
    inputs = $([]),
    switchers = $([]),
    defaults = {
        on: true,
        hotkey: '`'
    },
    settings = (typeof options === 'object' ? $.extend({}, defaults, options) : defaults);

    // first come up with affected set of input elements
    this.each(function() {
        var $this = $(this);

        if ($this.is(':text, textarea')) {
            inputs = inputs.add($this);
        } else if ($this.is('form')) {
            inputs = inputs.add($this.find(':text, textarea'));
        } else if ($this.is(':checkbox')) {
            if (!inputs.length) {
                inputs = $(':text, textarea');
            }
            switchers = switchers.add($this); // store the checkboxes for further manipulation
        }

        if (typeof settings.exclude === 'string') {
            inputs = inputs.not(settings.exclude);
        }
    });

    // mutate switchers
    switchers
        .click(function() { toggleLang() })
        .wrap('<div class="gk-switcher"></div>')
        .parent()
            .append('<div class="gk-ka" /><div class="gk-us" />');

    // turn on/off all switchers
    toggleLang(isOn = settings.on);

    $(document).keypress(function(e) {
        var ch = String.fromCharCode(e.which), kach;

        if (settings.hotkey === ch) {
            toggleLang();
            e.preventDefault();
        }

        if (!isOn || !inputs.filter(e.target).length) {
            return;
        }

        kach = translateToKa.call(ch);

        if (ch != kach) {
            if (navigator.appName.indexOf("Internet Explorer")!=-1) {
                window.event.keyCode = kach.charCodeAt(0);
            } else {
                pasteTo.call(kach, e.target);
                e.preventDefault();
            }
        }
    });

    function toggleLang() {
        isOn = arguments[0] !== undefined ? arguments[0] : !isOn;
        switchers
            .each(function() {
                this.checked = isOn;
            })
            .closest('.gk-switcher')[isOn ? 'addClass' : 'removeClass']('gk-on');
    }

    // the following functions come directly from Ioseb Dzmanashvili's GeoKBD (https://github.com/ioseb/geokbd)

    function translateToKa() {
        /**
        * Original idea by Irakli Nadareishvili
        * http://www.sapikhvno.org/viewtopic.php?t=47&postdays=0&postorder=asc&start=10
        */
        var index, chr, text = [], symbols = "abgdevzTiklmnopJrstufqRySCcZwWxjh";

        for (var i = 0; i < this.length; i++) {
            chr = this.substr(i, 1);
            if ((index = symbols.indexOf(chr)) >= 0) {
                text.push(String.fromCharCode(index + 4304));
            } else {
                text.push(chr);
            }
        }
        return text.join('');
    }

    function pasteTo(field) {
        field.focus();
        if (document.selection) {
            var range = document.selection.createRange();
            if (range) {
                range.text = this;
            }
        } else if (field.selectionStart != undefined) {
            var scroll = field.scrollTop, start = field.selectionStart, end = field.selectionEnd;
            var value = field.value.substr(0, start) + this + field.value.substr(end, field.value.length);
            field.value = value;
            field.scrollTop = scroll;
            field.setSelectionRange(start + this.length, start + this.length); 
        } else {
            field.value += this;
            field.setSelectionRange(field.value.length, field.value.length);    
        }
    };
}

}(jQuery));

field

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-25 03:36:19

如果在form元素上调用插件，而不是复选框，然后在文档中搜索除id为user_login的元素类型之外的所有所需元素类型，则inputs JQuery包装器将只包含所需的元素。

(function($, undefined) {

$.fn.geokbd = function(options) {
    var 
    isOn, 
    inputs = $([]),
    switchers = $([]),
    defaults = {
        on: true,
        hotkey: '`'
    },
    settings = (typeof options === 'object' ? $.extend({}, defaults, options) : defaults);

    // first come up with affected set of input elements
    // Using the standard DOM API, search the document for all `input` and 
    // 'textarea' elements, except for the one with an id of: "user_login"
    document.querySelectorAll("input:not(#user_login), textarea").forEach(function(item) {
        var $this = $(item);
        // You had the selector for an input incorrect
        if ($this.is('input[type="text"], textarea')) {
            inputs = inputs.add($this);
        } else if ($this.is('form')) {
            inputs = inputs.add($this.find('input[type="text"], textarea'));
        } else if ($this.is(':checkbox')) {
            if (!inputs.length) {
                inputs = $('input[type="text"], textarea');
            }
            switchers = switchers.add($this); // store the checkboxes for further manipulation
        }

        if (typeof settings.exclude === 'string') {
            inputs = inputs.not(settings.exclude);
        }
    });

    // mutate switchers
    switchers
        .click(function() { toggleLang() })
        .wrap('<div class="gk-switcher"></div>')
        .parent()
            .append('<div class="gk-ka" /><div class="gk-us" />');

    // turn on/off all switchers
    toggleLang(isOn = settings.on);

    $(document).keypress(function(e) {
        var ch = String.fromCharCode(e.which), kach;

        if (settings.hotkey === ch) {
            toggleLang();
            e.preventDefault();
        }

        if (!isOn || !inputs.filter(e.target).length) {
            return;
        }

        kach = translateToKa.call(ch);

        if (ch != kach) {
            if (navigator.appName.indexOf("Internet Explorer")!=-1) {
                window.event.keyCode = kach.charCodeAt(0);
            } else {
                pasteTo.call(kach, e.target);
                e.preventDefault();
            }
        }
    });

    function toggleLang() {
        isOn = arguments[0] !== undefined ? arguments[0] : !isOn;
        switchers
            .each(function() {
                this.checked = isOn;
            })
            .closest('.gk-switcher')[isOn ? 'addClass' : 'removeClass']('gk-on');
    }

    // the following functions come directly from Ioseb Dzmanashvili's GeoKBD (https://github.com/ioseb/geokbd)

    function translateToKa() {
        /**
        * Original idea by Irakli Nadareishvili
        * http://www.sapikhvno.org/viewtopic.php?t=47&postdays=0&postorder=asc&start=10
        */
        var index, chr, text = [], symbols = "abgdevzTiklmnopJrstufqRySCcZwWxjh";

        for (var i = 0; i < this.length; i++) {
            chr = this.substr(i, 1);
            if ((index = symbols.indexOf(chr)) >= 0) {
                text.push(String.fromCharCode(index + 4304));
            } else {
                text.push(chr);
            }
        }
        return text.join('');
    }

    function pasteTo(field) {
        field.focus();
        if (document.selection) {
            var range = document.selection.createRange();
            if (range) {
                range.text = this;
            }
        } else if (field.selectionStart != undefined) {
            var scroll = field.scrollTop, start = field.selectionStart, end = field.selectionEnd;
            var value = field.value.substr(0, start) + this + field.value.substr(end, field.value.length);
            field.value = value;
            field.scrollTop = scroll;
            field.setSelectionRange(start + this.length, start + this.length); 
        } else {
            field.value += this;
            field.setSelectionRange(field.value.length, field.value.length);    
        }
    };
}

$('form').geokbd();

}(jQuery));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html>
    <head>
<title></title>
<link rel="stylesheet" type="text/css" href="jquery.geokbd.css">

    </head>
    <body>

<div class="gk-switcher">
<input id="kbd-switcher" type="checkbox">
</div>

<form>
    <input type="text" placeholder="Title">
    <input type="text" placeholder="Description">
    <input placeholder="Password" type="password">
    <input placeholder="Email" type="email">
</form>

    <input placeholder="Email" type="email">
    <input placeholder="About me" maxlength="11" type="text">
    <input placeholder="Username:" type="text" name="user_login" id="user_login" class="wide">

    </body>
    </html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63567428

复制

相似问题

问如何禁用分隔输入字段上的javascript效果？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用分隔输入字段上的javascript效果？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何禁用分隔输入字段上的javascript效果？
EN