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

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

以下将完成这项工作。它基于an answer I wrote to another question。自定义transformTypedChar功能以满足您的需求；我的示例仅将字母 a-g 大写。

如果您需要在 textarea 而不是 <input type="text"> 上使用它，请注意 IE Is there an Internet Explorer approved substitute for selectionStart and 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

阻止默认操作然后触发按键怎么样？类似的，

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 3

你必须看到这个.. 让它工作后我对自己很满意..

您显然希望包含足够的标准以避免在此处陷入循环。

当条件评估为真时，下面的代码返回假，但它使用不同的 charCode 触发相同的事件，不会返回假。

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

你可以在 IE 中使用 fireEvent... 我用了 http://help.dottoro.com/ljrinokx.php 和 https://developer.mozilla.org/en/DOM/event.initKeyEvent供参考

Answer 4

不太确定你想要什么，但这会奏效吗？

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

或使用子字符串来按下最后一个字符并在上面执行toUpperCase()？

（psst...您也可以使用 keydown 或 keypress）。

Answer 5

你会用css吗？

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

Answer 6

彼得，

您可能会在这里找到一些灵感：

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

基本上围绕着各种方式来查看该“区域”周围的按键事件和功能。