2012-03-31 15 views
12

私は解決策を見つけるためにウェブ全体を見てきましたが、見つけられませんでした。編集可能なdivのキャレット位置の前に単語を取得する方法があります以下のような:JavaScriptの前にカーソルを置く

This is some| demo texts 

これは、単語「一部」が...これが可能である場合、私は知らない、私は任意のヘルプ、感謝:)のために喜んでいるだろうを返す必要があります。

+0

ブラウザの条件はありますか?人々はまた、jqueryがOKであるかどうかを知りたいと思うでしょう。 – Hemlock

+0

はい、すべてのブラウザが好きですが、主にFirefoxを使用したい、すべてのWeb言語を使用してください:) –

答えて

18

キャレットポジションファインダーメソッドを使用すると、hereが提供します。ここ

function GetCaretPosition(ctrl) { 
     var CaretPos = 0; // IE Support 
     if (document.selection) { 
      ctrl.focus(); 
      var Sel = document.selection.createRange(); 
      Sel.moveStart('character', -ctrl.value.length); 
      CaretPos = Sel.text.length; 
     } 
     // Firefox support 
     else if (ctrl.selectionStart || ctrl.selectionStart == '0') 
      CaretPos = ctrl.selectionStart; 
     return (CaretPos); 
    } 

    function getWordAtPos(s, pos) { 
     var preText = s.substring(0, pos); 
     if (preText.indexOf(" ") > 0 || preText.indexOf("\n") > 0) { 
      var words = preText.split(" "); 
      words = words[words.length - 1].split("\n"); 
      return words[words.length - 1]; //return last word 
     } 
     else { 
      return preText; 
     } 
    } 

    function AlertPrevWord() { 
     var text = document.getElementById("textArea"); 
     var caretPos = GetCaretPosition(text) 
     var word = ReturnWord(text.value, caretPos); 
     if (word != null) { 
      alert(word); 
     } 
    } 

実装

<input id="textArea" type="text" /> 
<br /> 
<input id="Submit" type="submit" value="Test" onclick="AlertPrevWord()" /> 

http://jsfiddle.net/arrwP/2/

+0

jsfiddleを作ってください。私はこれをテキストエリアに実装する方法を知らないので... –

+0

'textarea'または編集可能な' div'ですか? – Hemlock

+0

'| 'によって、OPは、ソース文字列に存在する実際の垂直ライン文字ではなく、キャレット位置を意味します。 –

9

SelectionRangeオブジェクトを使用して粗い方法です。 http://jsfiddle.net/ggfFw/1/

function getWord() { 
    var range = window.getSelection().getRangeAt(0); 
    if (range.collapsed) { 
     text = range.startContainer.textContent.substring(0, range.startOffset+1); 
     return text.split(/\b/g).pop(); 
    } 
    return ''; 
} 

現在のアクションでそれを見ることができます。 これはIEでは動作しません。 IEのサポートが必要な場合は、Rangyライブラリを参照してください。

+0

これを '