javascript - 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/