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

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

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

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;
    }
}

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

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

Ответы

Ответ 1

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

Если вам нужно это в текстовом поле, а не в <input type="text">, тогда имейте в виду, что в IE <= 8 есть проблемы с разрывами строк, которые следующий код не обрабатывает для краткости. Вы можете найти функцию кросс-браузера для получения выделения в текстовом поле здесь: Есть ли одобренная Internet Explorer замена selectStart и 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;
    }
};

Ответ 2

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

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
    }
}

Ответ 3

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

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

Приведенный ниже код возвращает 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 для справки

Ответ 4

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

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

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

(psst... вы можете использовать keydown или keypress).

Ответ 5

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

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