如何在同一文本区域内重新映射键盘

Question

目前我正在做一个项目，通过检测 keyup 函数将字符重新映射为单词。不幸的是，我只能检索第一个字符并重新映射到我想要的单词。在我的项目中，我需要直接检索所有键盘输入并直接将其转换为同一文本区域内我想要的单词。例如，当我在文本区域中键入时，它会直接转换为 "are"。我不知道为什么它停止检索第二个字符并且重新映射不起作用。下面是我的代码，希望有人能告诉我我的错误。谢谢。

<textarea class="width-100" id="translated-text"  onkeyup="myFunctionkey(event);" rows="10"></textarea>
<script>
function myFunctionkey(e) {
conversion();
}

function conversion(){
var x = document.getElementById('translated-text');
if(x.value == 'a'){
x.value='yes';
}
if(x.value == 'q'){
x.value = 'are';
}
}
</script>

Answer 1

在重新映射值时，您应该使用比较运算符“==”而不是赋值运算符“=”，如下所示：

x.value=='a'

编辑：

您应该在此处检查针对您的问题的更新代码： https://jsfiddle.net/o4coLr5t/1/

现在，您在 javascript 中选择重新映射的字符将显示您将字符映射到的字符串。否则它不会在按键时显示任何内容。因此，尝试将所有字符 keycodes 添加到 javascript 代码中。希望对您有所帮助。

Answer 2

据我了解，您只想抓取输入并将击键替换为完整的单词。

也许这样就可以了。我已将 onkeyup 更改为 onkeypress，因为根据我的记忆，这更可靠。

<textarea id="translated-text" cols="50" rows="10" onkeypress="replaceInputChar(event);"></textarea>
<script type="text/javascript">
    //create replacement map
    var map = {
        "a": "and",
        "b": "bold",
        "c": "change"
    };


    function replaceInputChar(e)
    {
        var ctl = document.getElementById("translated-text"); //control
        var char = String.fromCharCode(e.keyCode); //typed char

        if (char in map) //check if letter is defined in map
        {
            //insert replacement instead of letter
            if("selectionStart" in ctl)
            {
                //in modern browsers we can easily mimic default behavior at cursor position
                var pos = ctl.selectionStart;
                ctl.value = ctl.value.substr(0, pos) + map[char] + ctl.value.substr(ctl.selectionEnd);
                ctl.selectionStart = pos + map[char].length;
                ctl.selectionEnd = ctl.selectionStart;
            }
            else
                ctl.value += map[char];

            if ("preventDefault" in e) //modern browser event cancelling
                e.preventDefault();
            else
            {
                //old browser event cancelling
                e.returnValue = false; //IE8
                return false;
            }
        }
    }
    </script>

如何在同一文本区域内重新映射键盘

How to remap keyboard within the same textarea

html

javascript

jquery

keyboard-events

keyup