捕捉最後輸入的字，從文字

我需要捕捉的最後一個字的用戶在div/textarea的類型的中間。當這個詞是硬道理時，這不是一個問題。但是如果用戶在該段落的內部（中間）輸入了詞語呢？捕捉最後輸入的字，從文字

現在我有這樣的代碼：

<div contenteditable="true">Add text here</div> 
<script> 
    $("div").on("keyup", function(e){ 
     if (e.keyCode === 0 || e.keyCode === 32) { 
     var words = $(this).text().trim().split(' '), 
      lastWord = words[words.length - 1]; 
     console.log(lastWord); 
     } 
    }); 
</script>

它採用文本的最後一個字後，用戶敲擊空格。

來源

2017-07-15 VGranin

按預期工作，有什麼問題？ –

您可能需要存儲原始內容，並使用新內容進行某種形式的比較。 – mkaatman

@先生阿列恩他不想要在div中的最後一個字。他希望用戶添加的最後一個單詞，而不管它是在哪裏添加的。 – mkaatman

使用文本字符串到光標位置，您可以用window.getSelection功能得到：

$("div").on("keyup", function(e){ 
 
    if (e.keyCode === 0 || e.keyCode === 32) { 
 
    var selection = getSelection(); 
 
    var line = selection.getRangeAt(0).endContainer.nodeValue; 
 
    var cursor = selection.focusOffset; 
 
    var words = line.substring(0, cursor).trim().split(' '); 
 
    var lastWord = words[words.length - 1]; 
 
    console.log(lastWord); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div contenteditable="true"> 
 
    Add text here 
 
    <br/> 
 
    Or do it in this line 
 
</div>

來源

2017-07-15 16:23:09

如果用戶輸入故障，即我在每個單詞前後多次打空格，所以這不適用於該空間事件。可能我們需要捕獲每個擊鍵。 –

謝謝。但是如果用戶使用Enter，則會出現問題。嘗試按Enter鍵並繼續寫入。 – VGranin

我擴展了多行文本的解決方案。希望能幫助到你。 –

存儲每個字在按鍵事件數組，所以你可以捕捉用戶輸入的單詞的順序。在與空間分開之後採取最後的措辭。

例如，如果用戶鍵入：

「這是測試信息」，那麼他的類型「更新」字之前的「信息」二字，因此語句，如「這是一個測試更新的信息」：

所以在上面陣列，詞的順序是：

「這是測試信息更新」，我們可以拆分之後再拆陣列，我們會得到「更新」作爲我們想要的最後一個字。

來源

2017-07-15 15:45:55

這是假設用戶將光標移動到單詞「信息」的開頭並鍵入「更新」，命中。我傾向於單擊前一個單詞的結尾，添加另一個空格並鍵入該單詞。不是一個簡單的問題。大概需要跟蹤擊鍵，增加點擊處理程序，箭頭鍵處理...啊，這是一個可怕的問題。 – frattaro

你需要獲取插入符的位置，並從它，返回到恢復整個單詞。你可以在這裏進行測試：

$("div").on("keyup", function(e){ 
    if (e.keyCode === 13 || e.keyCode === 32) { 
    var text = $(this).text();    
    var range = window.getSelection().getRangeAt(0); 
    var preCaretRange = range.cloneRange(); 
    preCaretRange.selectNodeContents(e.target); 
    preCaretRange.setEnd(range.endContainer, range.endOffset); 
    caretOffset = preCaretRange.toString().length; 

    var word = ""; 
    var iterator = caretOffset-1; 
    var blanks = String.fromCharCode(160) + " \n"; 
    // Skip blanks from right to left 
    while (iterator >= 0 && blanks.indexOf(text[iterator]) > -1) { 
     iterator--; 
    } 

    while (iterator >= 0 && blanks.indexOf(text[iterator]) == -1) { 
    console.log(text[iterator].charCodeAt(0)); 
     word = text[iterator] + word; 
     iterator -= 1; 
    } 
    console.log(word.trim()); 
    } 
});

https://jsfiddle.net/7Lgpvgwc/1/

我已經得到了插入位置從here。

編輯：它看起來像contentEditable換行符使用nbsp（non-breaking spaces）而不是換行符。

來源

2017-07-15 16:04:52 lilezek

Chrome卡住你的代碼... – VGranin

它現在編輯。內容可編輯的div換行符是不間斷的空格，這是我從未注意過的。 – lilezek

捕捉最後輸入的字，從文字

回答

相關問題