我可以有条件地更改在按键上输入的输入字符吗？

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表示.

如果你需要在textarea上而不是<input type="text">那时需要知道IE <= 8中存在问题,并且为了简洁起见,以下代码不会处理换行符.你可以在这里找到用于获取textarea中的选择的跨浏览器功能:是否有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;
    }
};