在點擊跨度後移動附加輸入。

林上追加輸入到一個div，並提取其價值創造的跨度，在這裏一個文本編輯器的模擬工作是初始點擊（）函數：在點擊跨度後移動附加輸入。

var $cursorStart= $("#cursor-start"); 

$("#main-edit").click(function() { 
var cursorExists = $("#cursor").length; 
if (!cursorExists){ 
    $cursorStart.append("<input type='text' id = 'cursor' />"); 
    $("#cursor").markCursor(); 

} 
    if (cursorExists){ 
    $("#cursor").focus(); 

} 

});

當我開始打字，跨距之前插入輸入：

jQuery.fn.enterText = function(e){ 
var $cursor = $("#cursor"); 
if($cursor.val() && e.keyCode != 32 ){ 
    var character = $("#cursor").val(); 
    $cursor.val(""); 
    character = character.split("").join("</span><span class='text'>"); 
    $("<span class = 'text'>"+character+"</span>").insertBefore($cursor); 



}

我現在想知道的是，我怎麼能移動輸入（光標）左右（基本上是一個點擊間隔後，插入）。

<span>a</span> 
<span>b</span> 
<span>c</span> 
<span>d</span>

點擊a和b附近會導致「a」後面的輸入。這些是動態添加的跨度。

來源

2011-09-26 re1man

添加新跨越後，您可以在新的單擊事件綁定到它：

$("<span class = 'text'>"+character+"</span>").insertBefore($cursor); 

$cursor.prev().click(function(){ 
    $(this).after($cursor); 
});

你也可以使用jQuery的.live()功能，但是這通常不是一個好的解決方案，因爲它是如此昂貴。

來源

2011-09-26 15:32:35 maxedison

這似乎沒有工作^它似乎沒有找到cursor.prev（）？...我試過$（＃cursor）.prev（）也 – re1man

實際上得到它的工作：頁。兄弟姐妹（）會更好地定義對象嗎？ – re1man

你不想使用兄弟姐妹（），因爲它會引用所有的兄弟元素。您只需要將點擊事件綁定到新創建的跨度。這裏是一個例子：http://jsfiddle.net/shAzR/ – maxedison

檢查出jQuery caret plugin的X瀏覽器兼容功能，用於管理插入位置或在文本框或文本區中的選擇。這將允許您移動「輸入光標」周圍，像你描述它:-)

這是假設「我現在想知道的是，我怎麼能移動輸入（光標）左右「是你的問題，我不是100％清楚的。

來源

2011-09-26 15:37:00 Hubro

即時通訊實際上模擬光標在一個div框中。 – re1man

在點擊跨度後移動附加輸入。

回答

相關問題