Могу ли я условно изменить введенный в клавиатуру символ при нажатии клавиши?

Question

Можно ли изменить символ, который был введен при нажатии клавиши, не делая это вручную?

Например, если я хочу ввести прописные буквы на основе некоторого условия , этобыло бы неплохо сделать следующее:

function onKeypressHandler(e)
{
    if ( condition )
    {
        e.which -= 32;
    }
}

Но, конечно, это не работает.

ПРИМЕЧАНИЕ: Это , а не через верхний регистр, но только определенные символы.

Может быть, я хочу сказать if ( e.which >= 97 && e.which <= 102 ) или if ( Wind.Direction == 'South' ) или что-то еще - само условие не важно, но верхний регистр должен применяться только к текущему символу , а не ко всему вводу.

Я могу сделать это вручную, добавив измененный символ, но это уродливый и грязный способ сделать это, и, вероятно, медленнее, чем могло бы быть.

function onKeypressHandler(e)
{
    if ( condition )
    {
        $j(this).val( $j(this).val() + String.fromCharCode( e.which - 32 ) );
        return false;
    }
}

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

Может кто-нибудь предложить лучшее решение?

Answer 1

Следующее сделает работу.Он основан на ответе, который я написал на другой вопрос .Настройте функцию transformTypedChar в соответствии с вашими потребностями;В моем примере прописными буквами являются только буквы ag.

Если вам нужно это для текстовой области, а не для <input type="text">, помните, что в IE <= 8 есть проблемы с переносами строк, которые не обрабатываются в следующем кодеради краткости.Вы можете найти функцию кросс-браузера для получения выделения в текстовой области здесь: <a href="/193242/suschestvuet-li-odobrennaya-internet-explorer-zamena-dlya-selectionstart-i-selectionend#193255"> Есть ли одобренные Internet Explorer заменители selectionStart и selectionEnd?

function transformTypedChar(charStr) {
    return /[a-g]/.test(charStr) ? charStr.toUpperCase() : charStr;
}

document.getElementById("your_input_id").onkeypress = function(evt) {
    var val = this.value;
    evt = evt || window.event;

    // Ensure we only handle printable keys, excluding enter and space
    var charCode = typeof evt.which == "number" ? evt.which : evt.keyCode;
    if (charCode && charCode > 32) {
        var keyChar = String.fromCharCode(charCode);

        // Transform typed character
        var mappedChar = transformTypedChar(keyChar);

        var start, end;
        if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
            // Non-IE browsers and IE 9
            start = this.selectionStart;
            end = this.selectionEnd;
            this.value = val.slice(0, start) + mappedChar + val.slice(end);

            // Move the caret
            this.selectionStart = this.selectionEnd = start + 1;
        } else if (document.selection && document.selection.createRange) {
            // For IE up to version 8
            var selectionRange = document.selection.createRange();
            var textInputRange = this.createTextRange();
            var precedingRange = this.createTextRange();
            var bookmark = selectionRange.getBookmark();
            textInputRange.moveToBookmark(bookmark);
            precedingRange.setEndPoint("EndToStart", textInputRange);
            start = precedingRange.text.length;
            end = start + selectionRange.text.length;

            this.value = val.slice(0, start) + mappedChar + val.slice(end);
            start++;

            // Move the caret
            textInputRange = this.createTextRange();
            textInputRange.collapse(true);
            textInputRange.move("character", start - (this.value.slice(0, start).split("\r\n").length - 1));
            textInputRange.select();
        }

        return false;
    }
};

Answer 2

Вы должны это увидеть ... Я был очень доволен собой после того, как заставил его работать ..

Вы, очевидно, хотели бы включить достаточное количество критериев, чтобы избежать зацикливания здесь.

Приведенный ниже код возвращает false, когда условие оценивается как true, но оно запускает то же событие с другим charCode, который не возвращает false.

document.getElementById("input1").onkeypress = Handler;
function Handler(e)
{
    e = e || window.event;
    if ( e.charCode == 97 )
    {
        var evt = document.createEvent("KeyboardEvent");
        evt.initKeyEvent("keypress",true, true, window, false, false,false, false, 0, e.charCode -32);
        this.dispatchEvent(evt);
        return false;
    }
    return true;
}

вы можете использовать fireEvent в IE ... Я использовалhttp://help.dottoro.com/ljrinokx.php и https://developer.mozilla.org/en/DOM/event.initKeyEvent для справки

Answer 3

Как насчет предотвращения действия по умолчанию и последующего нажатия клавиши? Что-то вроде

function onKeypressHandler(e)
{
    if ( condition )
    {
        e.preventDefault();
        // create new event object (you may clone current e)
        var ne = new jQuery.Event("keypress");
        ne.which = e.which - 32;
        $(e.target).trigger(ne);   // you may have to invoke with setTimeout
    }
}

Answer 4

Питер,

Вы можете найти здесь вдохновение:

http://www.maconstateit.net/tutorials/JSDHTML/JSDHTML15/jsdhtml15-05.htm

в основном обходит различные способы взглянуть на события нажатия клавиш и функции вокруг этого 'площадь».

Answer 5

Не совсем уверен, что вы хотите, но будет ли это работать?

$('#my_element').keyup(function(){ $(this).val().toUpperCase(); });

или используйте подстроку, чтобы получить последний нажатый символ, и наберите toUpperCase() для этого?

(psst ... вы также можете использовать нажатие клавиш или нажатие клавиш).

Answer 6

Можете ли вы использовать CSS?

<input type="text" style="text-transform: uppercase;" />