setSelectionRange 移动光标，不选择

Question

我做了一个jsFiddle！

http://jsfiddle.net/31mts93v/

我想创建一个以这种方式工作的输入框：当您按下左右箭头键时，它会根据光标所在的位置选择（如鼠标选择）上一个单词或下一个单词。

要开始这个，我需要能够在您按下左箭头键时动态选择文本的一部分。虽然它似乎只是移动了光标并没有选择任何内容，如上面的jsFiddle。

HTML 是：

<input type='text' id='humantext' class='form-control' value='foo bar and bar bar foo, a bar fooey foo foo bar' />

JS 是：

$(document).ready(function () {

function createSelection(start, end) {
    var field = document.getElementById('humantext');
    console.log(start + ' ' + end);
    if( field.createTextRange ) {
        console.log('createtextrange');
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        console.log('setSelectionRange');
        field.focus();
        field.setSelectionRange(2, 7);
    } else if( field.selectionStart ) {
        console.log('selectionStart');
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}     

$("#humantext").keydown(function (e) {
    var words = $(this).val().split(' ');
    if (e.keyCode == 37) {
        // Left Arrow
        createSelection(0,5);
    }
    if (e.keyCode == 38) {
        // Right Arrow
        createSelection(10,20);

    }
});
});

第二次编辑经过一上午，我终于搞定了。按下箭头键时，我的大挂断并没有阻止默认设置。这是jsfiddle： http://jsfiddle.net/31mts93v/3/

Answer 1

需要做的三件事：

• 添加event.preventDefault()
• 使用开始和结束变量而不是硬编码的 2 和 7
• 右箭头键代码为 39

完整代码：

$(document).ready(function () {

function createSelection(start, end) {
    var field = document.getElementById('humantext');
    console.log(start + ' ' + end);
    if( field.createTextRange ) {
        console.log('createtextrange');
        var selRange = field.createTextRange();
        selRange.collapse(true);
        selRange.moveStart('character', start);
        selRange.moveEnd('character', end);
        selRange.select();
    } else if( field.setSelectionRange ) {
        console.log('setSelectionRange');
        field.focus();
        field.setSelectionRange(start, end);
    } else if( field.selectionStart ) {
        console.log('selectionStart');
        field.selectionStart = start;
        field.selectionEnd = end;
    }
    field.focus();
}     

$("#humantext").keydown(function (e) {
    e.preventDefault()
    var words = $(this).val().split(' ');
    if (e.keyCode == 37) {
        // Left Arrow
        createSelection(0,5);
    }
    if (e.keyCode == 39) {
        // Right Arrow
        createSelection(10,20);

    }
});
});

http://jsfiddle.net/omahlama/pszwmomk/1/