Question

我想要达到的目的是阅读插入位置的当前单词。

示例：

您好| - ＆GT;返回Hello

Hel | lo - ＆gt;返回Hello

我已将代码放在if语句中的onKeyup事件处理程序中：

if( e.keyCode === 37 || e.keyCode === 39 ){
  console.log($(this).getWord());
}

执行此操作时，它会返回当前单词，但文本区域会失去焦点。

Jsfiddle

这应该如何运作？

在文本区域键入单词，然后单击向左或向右箭头键，将显示当前单词。

Answer 1

我会使用textArea.selectionStart而不是改变选择本身。如果Internet Exploder＆lt; 8兼容性并不是一个问题。

＆＃13;

var $mytextarea = $('#mytextarea');

$mytextarea.keyup(function(e) {
  if (e.keyCode === 37 || e.keyCode === 39) {
    $("#current").text(getWord());
  }
});

function getWord() {
  var textarea = $mytextarea[0],
    pos = textarea.selectionStart,
    raw = textarea.value,
    start = pos,
    end = pos;

  while (raw.charAt(start) !== ' ' && start > 0) {
    start--;
  }
  while (raw.charAt(end) !== ' ' && end < raw.length) {
    end++;
  }

  return raw.substring(start, end);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="mytextarea">The quick brown fox jumps over the lazy dog.</textarea>
<div>

  the current word is <span id="current"></span>
</div>

＆＃13;

Answer 2

我改变了你的代码。它不再操纵光标，这意味着响应时间要快得多。

这是您更新的代码：

$('#mytextarea').keyup(function (e) {
    //if (e.keyCode === 37 || e.keyCode === 39) {
  
        //get cursor position
        var caret = getCaretPosition(this);
        //get the end index of current word
        var endOfWord = this.value.slice(caret.end).match(/(\s|$)/i).index + caret.end;
        //get current word
        var word = /\S+$/.exec(this.value.slice(0,endOfWord));
        //make sure word is not null
        word = word ? word[0] : '';
        //remove punctuation
        word = word.replace(/(\.|\!|,|;|:|\(|\)|\{|\}|\[|\]|'|"|-$)/,'');
        $("#current").text(word);
  
    //}
});

function getCaretPosition(ctrl) {
    var start, end;
    if (ctrl.setSelectionRange) {
        start = ctrl.selectionStart;
        end = ctrl.selectionEnd;
    } else if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        start = 0 - range.duplicate().moveStart('character', -100000);
        end = start + range.text.length;
    }
    return {
        start: start,
        end: end
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea id="mytextarea"></textarea>
<div>
  the current word is <span id="current"></span>
</div>

我想指出这不是我的代码，而是从this fiddle复制的。

调用函数时，Textarea失去了焦点

2 个答案: