調用函數時，Textarea失去焦點

Question

我試圖實現的是讀取插入位置處的當前單詞。

例子：

你好| - >返回你好

赫爾| LO - >返回你好

我已經把代碼的事件處理程序是的onkeyup if語句內裏：當這個執行

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

，它返回當前單詞，但文本區域失去焦點。

Jsfiddle

這是怎麼應該工作？

在文本區域輸入單詞，然後點擊左或右箭頭鍵，當前單詞將顯示。

Answer 1

我會用textArea.selectionStart而不是改變選擇本身。如果不考慮Internet兼容性問題，這將對您有用。

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); 
 
}

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

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被複制。