我可以有条件地更改在按键上输入的输入字符吗？ [英] Can I conditionally change the character entered into an input on keypress?

问题描述

是否可以更改已在按键上输入的字符，而无需手动操作？

Is it possible to change the character which has been entered on keypress, without doing it manually?

例如，如果我想强制使用大写字母基于某些条件，最好做到以下几点：

For example, if I want to force uppercase letters based on some condition, it'd be nice to do the following:

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

但当然这不起作用。

注意：这是不一个全面的大写字母，但仅特定字符。

NOTE: This is not an across the board uppercasing, but only specific characters.

也许我想说 if（e.which> = 97&& e.which< = 102）或 if（Wind.Direction =='South'）或者其他 - 条件本身并不重要，但大写只能适用于当前字符不是整个输入。

Maybe I want to say if ( e.which >= 97 && e.which <= 102 ) or if ( Wind.Direction == 'South' ) or whatever - the condition itself is not important, but the uppercasing must only apply to the current character not the entire input.

我可以通过手动附加更改的字符来实现，但这是一个丑陋的这样做很麻烦，而且可能比它慢。

I can do it by manually appending the changed character, but this is an ugly and messy way of doing it, and probably slower than it could be.

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

此方法存在特定缺陷 - 如果选择所有输入文本和输入密钥，如果它落入其中，则它不会删除现有内容，而只是附加到用户想要删除的内容。 （需要调查检测任何选定的文本来解决这个问题，这使得这个问题变得更加丑陋。）

A specific flaw with this method - if selecting all input text and entering a key, if it drops into this then it doesn't remove existing content, but simply appends to the content the user wanted removed. (Would need to investigating detecting any selected text to solve that, which makes this one even uglier.)

任何人都可以提供更好的解决方案吗？

Can anyone provide a better solution?

推荐答案

以下将完成这项工作。它基于答案我写信给另一个问题。自定义 transformTypedChar 功能以满足您的需求;我的例子只用字母ag来表示。

The following will do the job. It's based on an answer I wrote to another question. Customize the transformTypedChar function to suit your needs; my example capitalizes only the letters a-g.

如果你需要在textarea上而不是< input type =text> 然后请注意IE< = 8中存在问题，并且为了简洁起见，以下代码不会处理换行符。您可以在此处找到用于在textarea中获取选择的跨浏览器功能：是否有Internet Explorer批准的selectionStart和selectionEnd的替代品？

If you need this on a textarea rather than an <input type="text"> then be aware that there are issues in IE <= 8 with line breaks that the following code doesn't handle for the sake of brevity. You can find the cross browser function for obtaining the selection within a textarea here: 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;
    }
};

这篇关于我可以有条件地更改在按键上输入的输入字符吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！