Question

我做了一个jsFiddle！

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

要开始此操作，我需要能够在按左箭头键时动态选择文本的一部分。虽然它似乎只是移动光标而没有选择任何内容，如上面的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＆amp; 7
右箭头keyCode为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/

setSelectionRange移动光标，不选择

1 个答案: