使用javascript中的箭头光标键代码更改光标位置

Question

我的编辑区：

<div id="myeditor" contenteditable="true"><div>

我可以使用

发送和显示密钥代码

$("#myeditor").text($("#myeditor").text() + String.fromCharCode(65))

它在我的id'myeditor'的div中显示“A”。但我很难发送箭头光标键码。 （左：37;上：38;右：39;下：40）

$("#myeditor").text($("#myeditor").text() + String.fromCharCode(39))

啊，它不起作用..它显示其他ascii字符（如符号或引号），这不是意图。你能告诉我一个正确的方法吗？

Answer 1

我猜原因是，所有其他字符都来自与之关联的字符。但是箭头键没有←，→与它们相关的这些字符。他们只是有一些功能。您是否曾使用箭头键在文本框中输入箭头？

如果你真的想用它们输入箭头，你可以在jQuery中执行以下操作。

var element = $('#myeditor'),
    elementText = element.text();
    store = {
        37: "←",
        38: "↑",
        39: "→",
        40: "↓"
    };

element.keydown(function( event ) {
    var selection = window.getSelection().getRangeAt(0);
         //getSelection gets the selected range of text, when nothing is selected,selection is empty.getRangeAt(0)makes selection from the start of selection.
    var keyCode = event.which;
    if( store[ keyCode ]) {
        var n = document.createElement('span');
            //Adds a new html element.
        n.innerHTML = store[keyCode];
            //Adds the arrow to the newly created html element.
        selection.insertNode( n );
            //insert the newly created html element.
    }
});

Demo Fiddle by Connor →

或http://jsfiddle.net/ybPzP/10/

Answer 2

我使用String.fromCharCode（0x2190）来比较javascript中的左箭头字符。如果你发出警告，那么你可以看到左箭头字符被警告。