jquery.RuEn.js
От: Max404.NET Россия http://HrExpress.ru/
Дата: 16.10.13 11:03
Оценка: 9 (2) +2
Написал плагин под JQuery, наверно кому-то будет интересно.
Вешается на текстовое поле, при вводе преобразует русские буквы в латинские. Полезно при вводе Email, например, можно не переключать языки ввода. Или в полях, где должна быть только латиница.
Бонусом ввод "@" кнопкой "~"("Ё").
Можно ругать, js только осваиваю


(function ($)
{
    $.fn.ruEn = function ()
    {
        var charMap = {
            "й": "q",
            "ц": "w",
            "у": "e",
            "к": "r",
            "е": "t",
            "н": "y",
            "г": "u",
            "ш": "i",
            "щ": "o",
            "з": "p",
            "ф": "a",
            "ы": "s",
            "в": "d",
            "а": "f",
            "п": "g",
            "р": "h",
            "о": "j",
            "л": "k",
            "д": "l",
            "я": "z",
            "ч": "x",
            "с": "c",
            "м": "v",
            "и": "b",
            "т": "n",
            "ь": "m",
            "Й": "Q",
            "Ц": "W",
            "У": "E",
            "К": "R",
            "Е": "T",
            "Н": "Y",
            "Г": "U",
            "Ш": "I",
            "Щ": "O",
            "З": "P",
            "Ф": "A",
            "Ы": "S",
            "В": "D",
            "А": "F",
            "П": "G",
            "Р": "H",
            "О": "J",
            "Л": "K",
            "Д": "L",
            "Я": "Z",
            "Ч": "X",
            "С": "C",
            "М": "V",
            "И": "B",
            "Т": "N",
            "Ь": "M",
            "ю": ".",
            "Ю": ".",
            "ё": "@",
            "Ё": "@"
        };
        return this.each(function ()
        {
            var $this = $(this);
            $this.on("keypress", function (event)
            {
                if (event.which) {
                    var charStr = String.fromCharCode(event.which);
                    var transformedChar = transformTypedCharacter(charStr);
                    if (transformedChar != charStr) {
                        var sel = getInputSelection(this);
                        this.value = this.value.slice(0, sel.start) + transformedChar + this.value.slice(sel.end);
                        // Move the caret
                        setInputSelection(this, sel.start + 1, sel.start + 1);
                        return false;
                    }
                }
            });
        });

        function transformTypedCharacter(typedChar)
        {
            return charMap[typedChar] || typedChar;
        }

        function setInputSelection(el, startOffset, endOffset)
        {
            el.focus();
            if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
                el.selectionStart = startOffset;
                el.selectionEnd = endOffset;
            } else {
                var range = el.createTextRange();
                var startCharMove = offsetToRangeCharacterMove(el, startOffset);
                range.collapse(true);
                if (startOffset == endOffset)
                    range.move("character", startCharMove);
                else {
                    range.moveEnd("character", offsetToRangeCharacterMove(el, endOffset));
                    range.moveStart("character", startCharMove);
                }

                range.select();
            }
        }

        function offsetToRangeCharacterMove(el, offset)
        {
            return offset - (el.value.slice(0, offset).split("\r\n").length - 1);
        }

        function getInputSelection(el)
        {
            var start = 0, end = 0, normalizedValue, range,
                textInputRange, len, endRange;

            if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
                start = el.selectionStart;
                end = el.selectionEnd;
            } else {
                range = document.selection.createRange();

                if (range && range.parentElement() == el) {
                    len = el.value.length;
                    normalizedValue = el.value.replace(/\r\n/g, "\n");

                    // Create a working TextRange that lives only in the input
                    textInputRange = el.createTextRange();
                    textInputRange.moveToBookmark(range.getBookmark());

                    // Check if the start and end of the selection are at the very end
                    // of the input, since moveStart/moveEnd doesn't return what we want in those cases
                    endRange = el.createTextRange();
                    endRange.collapse(false);

                    if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1)
                        start = end = len;
                    else {
                        start = -textInputRange.moveStart("character", -len);
                        start += normalizedValue.slice(0, start).split("\n").length - 1;

                        if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1)
                            end = len;
                        else {
                            end = -textInputRange.moveEnd("character", -len);
                            end += normalizedValue.slice(0, end).split("\n").length - 1;
                        }
                    }
                }
            }

            return { start: start, end: end };
        }
    };
})(jQuery);
Одинаковые ошибки необязательно делать каждый раз, достаточно сделать одну, а затем обращаться к ней по мере необходимости из любого места программы.
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.