Определить десятичную (точечную) клавишу с цифровой клавиатуры - PullRequest
4 голосов
/ 13 июля 2010

Мне нужно определить, нажал ли пользователь клавишу с точкой на цифровой клавиатуре. Я написал этот первый черновик, который работает для меня:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
(function($){
    var knownCodes = [
        [110, 46], // Firefox, IE, Chrome
        [78, 46] // Opera
    ];
    var pressedCodes = [null, null];

    $.fn.comma = function(){
        this.live("keydown", function(e){
            pressedCodes = [e.which, null];

        }).live("keypress", function(e){
            pressedCodes[1] = e.which;

            for(var i=0, len=knownCodes.length; i<len; i++){
                if(pressedCodes[0]==knownCodes[i][0] && pressedCodes[1]==knownCodes[i][1]){
                    $("#log").append("<li>Decimal key detected</li>");
                    break;
                }
            }
        });

        return this;
    };
    $(function(){
        $('<ol id="log"></ol>').appendTo("body");
    });
})(jQuery);

jQuery(function($){
    $(".comma input:text, .comma textarea").css("border", "1px solid black").comma();
});
//--></script>
</head>
<body>

    <form action="" method="get" class="comma" size="20">
        <p><input type="text"></p>
        <p><textarea rows="3" cols="30"></textarea></p>
    </form>

</body>
</html>

Однако я могу протестировать его только в коробке с Windows XP с испанской клавиатурой. Мои вопросы:

  1. Безопасно ли читать с e.which? Я использую его, потому что и e.keyCode, и e.charCode возвращают undefined хотя бы в одном браузере.

  2. Влияет ли операционная система на числовые коды каким-либо образом или это только браузер?

  3. Эти коды зависят от раскладки клавиатуры?


Справочная информация: я не смог найти плагин jQuery для переназначить цифровую клавиатуру , поэтому я пишу свой собственный.

Обновление

Я объясню мою точную потребность. На испанских клавиатурах с цифровой клавиатурой есть клавиша .. Тем не менее, десятичный разделитель на испанском языке ,. Это мешает набирать цифры в веб-приложениях. Некоторые настольные приложения, такие как MS Excel, переназначают этот ключ, чтобы он вставлял запятую. Я пытаюсь подражать этому.

Я адаптировал небольшой скрипт, который использовал, чтобы опубликовать его здесь. Вот как я получил значения для массивов knownCodes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"><!--
(function($){
    $.fn.showKeyCodes = function(){
        var log = function(e){
            $("<li></li>").text(e.type + "(): [keyCode, charCode, which]=[" + e.keyCode + ", " + e.charCode + ", " + e.which + "]").appendTo("#log");
        }

        this.live("keydown", function(e){
            log(e);

        }).live("keypress", function(e){
            log(e);

        }).live("keyup", function(e){
            log(e);

        });

        return this;
    };
    $(function(){
        $('<ol id="log"></ol>').appendTo("body");
    });
})(jQuery);

jQuery(function($){
    $(".showKeyCodes input:text, .showKeyCodes textarea").css("border", "1px solid black").showKeyCodes();
});
//--></script>
</head>
<body>

    <form action="" method="get" class="showKeyCodes" size="20">
        <p><input type="text"></p>
        <p><textarea rows="3" cols="30"></textarea></p>
    </form>

</body>
</html>

Введите клавишу . на цифровой клавиатуре (или любую другую клавишу, заменяющую ее в раскладке клавиатуры) и клавишу, соответствующую тому же символу в алфавитной клавиатуре. Цель состоит в том, чтобы обнаружить, что вы нажали первый, а не второй.

Ответы [ 3 ]

3 голосов
/ 13 июля 2010

Безопасно ли читать с e.which?

Обычно в IE нет, вы получаете только keyCode (хотя на keypress это фактически код символа, а не ключкод).Ваш код может читать which, потому что за кулисами jQuery копирует значение keyCode в which в IE.Без jQuery вам понадобится код отслеживания свойств, чтобы знать, какой из них выбрать.(Вы не можете всегда читать keyCode на keypress, потому что это не гарантировано, и это 0 в Firefox.)

Обратите внимание, что я не хочу обнаруживать символ: Я хочу определить ключ.

Вы не можете сделать это в keypress, который дает только код символа (46, ASCII для .).Вместо этого вам придется перехватывать keydown, что дает вам доступ к реальному коду ключа (в свойстве keyCode, а также в браузерах, которые не являются IE, в which).

keyCode сообщается для цифровой клавиатуры. . / , кнопка - 110 (ASCII для строчной буквы N).За исключением оперы, где 78, ASCII для заглавной буквы N и, следовательно, неотличимо от нажатия кнопки N.

Таким образом, вы можете претендовать на событие keydown и сохранять флаг, когда клавиша 110 или 78 находиласьдепрессия, затем претензия keypress.Если был установлен флаг последнего keydown, а свойство which (charCode) равно 46, return false, чтобы не допустить нажатия клавиш, а затем вместо него вставьте , в точку фокусировки.(Это не совсем надежно, если одновременно нажимается несколько клавиш и происходит автоповтор.)

Обратите внимание, что вставка символа в фокусе сама по себе нетривиальна;см. много предыдущих вопросов здесь.Вам потребуется код ветвления для IE (document.selection.createRange().text=...) и других современных браузеров (изменение ввода value на основе selectionStart / selectionEnd).Старые и мобильные или нишевые браузеры могут не поддерживать ни один из методов редактирования, поэтому обнаружите отсутствие этих свойств и оставьте клавиатуру в покое, если не можете это сделать.

Влияет ли операционная система на эти числовые значениякаким-то образом кодирует или это только браузер?Эти коды зависят от раскладки клавиатуры?

В общем, да, но не таким образом, что это повлияет на вас здесь.Ключевые события, как правило, по-прежнему очень изменчивы: кросс-браузер, кросс-клавиатура и кроссплатформенность;лучше всего их избегать, если вы можете.

Лично я считаю, что правильным решением для неправильного выбора раскладки клавиатуры, такого как десятичная точка испанского языка, будет изменение раскладки с помощью MSKLC .

1 голос
/ 01 марта 2012

Через некоторое время после того, как я задал этот вопрос, я наконец-то нашел плагин jQuery, который делает именно это: numpad-decimal-separator

1 голос
/ 13 июля 2010

Ваш код ничего не делает для меня, поэтому я бы сказал, что, вероятно, это зависит от раскладки клавиатуры.Быстрая проверка подтверждает, что на моей финской qwerty клавиатуре выводится код клавиши 44 вместо ожидаемого 46.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...