移動光標，指向下一個contentEditable - jQuery

我期待做的具體是當我按下輸入它創建一個新的段落光標然後移動到或選擇新的內容可編輯段落開始鍵入，但我似乎無法找到一種方式去做吧。移動光標，指向下一個contentEditable - jQuery

/*HTML Layout*/ 
<div id="wrap" contenteditable="true"> 
|| <----cursor posiiton 
//*New paragraph content editable when enter is pressed 
<p contenteditable="true">New Paragrpah</p> 
</div> 

/* JQuery Code */ 
if(event.which == 13){ 
event.preventDefault(); 
elem.append('<p>insert a new paragraph</p>'); 
$('#container *').attr('contenteditable','true'); 
$('p', elem).focus();}

任何人都有什麼見解？將不勝感激。

我知道它可能與輸入字段和.focus（）但它不會工作在一個contentEditable必須有一種方法來做到這一點。

問候帕特里克

來源

2011-06-04 Patrick Hendron

請提供完整的代碼接下來的時間，即事件處理程序一樣好，甚至只給一份直接的jsfiddle什麼的，所以我們可以直接嘗試進行這項工作。爲什麼你想在contenteditable項目中有一個'contenteditable'項目呢？ – Niklas 2011-06-04 13:16:02

我會把它放在Jsfiddle上。我這樣做是爲了點擊一個空白空間上可編輯的內容，但我想添加一個點擊事件到一個空白空間來添加一個新的內容編輯將工作是一樣的。 – 2011-06-04 13:21:30

禁用父contenteditable，將焦點設置新contenteditable，使家長contenteditable和背部集中在母公司contenteditable（不會讓你到外面的當前，否則在某些瀏覽器移動。）。

$(window).keydown(function(event){ 

if(event.which == 13){ 

    event.preventDefault(); 

    var p = $('<p />').text("insert a new paragraph").attr('contenteditable','true').appendTo($('#wrap')); 
    $('#wrap').attr('contenteditable','false'); 
    $(p).focus(); 
    $('#wrap').attr('contenteditable','true').focus(); 

} 

});

例子：http://jsfiddle.net/niklasvh/6AsHq/

來源

2011-06-04 13:57:13 Niklas

Nikklas版本的作品！我也爲自己工作：http://jsfiddle.net/patrickhendron/2WGen/1/ – 2011-06-04 14:01:19

很高興你找到了解決方案。 'contenteditable'當然不像我預料的那樣工作。 – Niklas 2011-06-04 14:04:28

移動光標，指向下一個contentEditable - jQuery

回答

相關問題