9

現在のタグが空の場合、カーソルを次/前の contenteditable タグの最後に設定しようとしていますが、フォーカスを設定すると、テキストの先頭にフォーカスが追加され、終了しません私のために働いてください。ここで私が試している簡単なコード

HTMLコード

<div id = 'main'>
<div id = 'n1' contenteditable=true> Content one</div>
<div id = 'n2' contenteditable=true> Content 2</div>
<div id = 'n3' contenteditable=true> Content 3</div>
<div id = 'n4' contenteditable=true> Content 4</div>

JS コード

$('#main div').keydown(function(){
if(!$(this).text().trim()){
    $(this).prev().focus();
   //setCursorToEnd(this.prev())
    }
});


function setCursorToEnd(ele)
  {
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }
4

3 に答える 3

13

jQueryを使用していて、jQueryから要素を取得しています。「setCurserToEnd」関数を使用するには、（jQuery-get関数を介して）ネイティブDOM要素に変換する必要があります。

メソッド呼び出し：

setCursorToEnd(this.prev());

実用的なソリューション：

setCursorToEnd($(this).prev().get(0));

更新されたフィドルを参照してください：http：//jsfiddle.net/dvH5r/4/

于 2012-11-22T14:32:22.727 に答える
3

あなたはかなり近かったです.唯一の問題は、実際のDOM要素をsetCursorToEnd()に渡したいのに対し、prev()がjQueryオブジェクトを返すことです.

完成品: http://jsfiddle.net/B5GuC/

*注: これは、上記の div 要素が空の場合でも機能します。バニラjsftw。

$('#main div').keydown(function(){
    if(!$(this).text().trim()){
        $(this).prev().focus();
        setCursorToEnd(getPrevSib(this));
    }
});

function setCursorToEnd(ele){
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

function getPrevSib(n){
    //gets prev sibling excl whitespace || text nodes
    var x=n.previousSibling;
    while (x && x.nodeType!=1){
          x=x.previousSibling;
    }
    return x;
}
于 2012-11-22T16:04:50.293 に答える
0

これを行うにはブラウザーが大きく異なるため、プラグイン jCaretを使用することをお勧めします。たとえば、フィールド内の現在の位置を取得するには、

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

次に、を使用して位置を設定できます（ただし、テストしていません）

var endPos = $(this).caret().end;
$("input:text.hola").caret({start:endPos ,end:endPos });
于 2012-11-22T13:11:06.580 に答える