【问题标题】:Javascript String.fromCharCode returns wrong valuesJavascript String.fromCharCode 返回错误值
【发布时间】:2015-05-11 07:12:25
【问题描述】:

我有这个 Knockout 自定义绑定来验证文本框是否只包含英文字母。但是,似乎 Javascript 的 String.fromCharCode 返回了错误的值。

例如,希伯来字母“ש”返回为英文字母“A”,右侧数字键盘中的数字“1”返回为“a”... p>

这是我的 Knockout 绑定:

var arrValidKeys = [8, 16, 17, 20, 35, 36, 37, 39, 46];
    ko.bindingHandlers.validateText = {
        init: function (element, valueAccessor) {
            $(element).on("keydown", function (event) {

                //Regex pattern: allow only (A to Z uppercase, a to z lowercase)
                var englishAlphabet = /[A-Za-z]/g;

                // Retrieving the key from the char code passed in event.which
                var key = String.fromCharCode(event.which);

                // keyCodes list: http://stackoverflow.com/a/3781360/114029
                // check that the key is valid with the above Regex
                valueAccessor()($(this).val());

                return ((jQuery.inArray(event.keyCode, arrValidKeys) != -1) || englishAlphabet.test(key));
            });

            $(element).on("keyup", function (event) {

                //Regex pattern: allow only (A to Z uppercase, a to z lowercase)
                var englishAlphabet = /[A-Za-z]/g;

                // Retrieving the key from the char code passed in event.which
                var key = String.fromCharCode(event.which);

                // keyCodes list: http://stackoverflow.com/a/3781360/114029
                // check that the key is valid with the above Regex

                valueAccessor()($(this).val());

                return ((jQuery.inArray(event.keyCode, arrValidKeys) != -1) || englishAlphabet.test(key));
            });

            $(element).on("paste", function (e) {
                var englishAlphabet = /[A-Za-z]/g;
                if (englishAlphabet.test($(this).val()))
                    valueAccessor()($(this).val());
                else
                    e.preventDefault();
            });
        }
    };

【问题讨论】:

  • event.keyCodeevent.which 在 jQuery 中是一样的——最好使用其中一个。两者同时使用可能会造成混淆。
  • jsfiddle 可能对我们有所帮助:)
  • 我正在为你做一个 jsfiddle :)
  • 一个 jsfiddle,只为你 :) jsfiddle.net/2ma9nhn7
  • 似乎对我很有效。我已经稍微更新了小提琴,因为 paste 它不起作用:jsfiddle.net/2ma9nhn7/2 如果您点击 event.whichevent.which 有什么价值?

标签: javascript knockout.js


【解决方案1】:

遵循@Jeanluca Scaljeri 在这篇文章中的建议:Get Correct keyCode for keypad(numpad) keys

我将我的代码更新为:

// keyCodes list: https://stackoverflow.com/a/3781360/114029
var arrValidKeys = [8, /*backspace*/
                    16, /*shift*/
                    17, /*ctrl*/
                    20, /*caps lock*/
                    35, /*end*/
                    36, /*home*/
                    37, /*left arrow*/
                    39, /*right arrow*/
                    46, /*delete*/];

function validateChar(keyCode) {
    //Regex pattern: allow only (A to Z uppercase, a to z lowercase)
    var englishAlphabet = /[A-Za-z]/g;

    //Retrieving the key from the char code passed in event.which
    var key = String.fromCharCode(keyCode);

    //Check that the key is valid with the above Regex
    return ((jQuery.inArray(keyCode, arrValidKeys) != -1) ||     englishAlphabet.test(key));
}

ko.bindingHandlers.validateText = {
    init: function (element, valueAccessor) {
        $(element).on("keypress", function (event) {
            valueAccessor()($(this).val());
            return validateChar(event.which);
        });

        $(element).on("keydown", function (event) {
            valueAccessor()($(this).val());
            return validateChar(event.which);
        });

        $(element).on("keyup", function (event) {
            valueAccessor()($(this).val());
            return validateChar(event.which);
        });

        $(element).on("paste", function (e) {
            var englishAlphabet = /^[A-Za-z]+$/g;
            var text = e.originalEvent.clipboardData.getData('Text');
            if (!englishAlphabet.test(text))
                e.preventDefault();
        });
    }
};

我添加所有 3 个事件(keypresskeydownkeyup)的原因是,当按下退格键时,单独的 keypress 不会触发,我需要它来更新带有敲除的标签可观察到的。

这是一个有效的 jsfiddle 链接:https://jsfiddle.net/2ma9nhn7/6/

【讨论】:

  • 关于这个问题,是的,非常感谢您的帮助 :-) 尽管为这个任务处理 3 个事件看起来有点矫枉过正......
  • 我猜你是对的。但恐怕没有其他选择。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-02-24
  • 1970-01-01
  • 2021-06-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-01-27
相关资源
最近更新 更多