Question

我正在进行文本编辑器模拟，将输入附加到div，并提取其值以创建跨度，这是最初的click（）函数：

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”后面的输入。这些是动态添加的跨度。

Answer 1

添加新范围后，您可以将新的点击事件绑定到它：

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

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

您也可以使用jQuery的.live()函数，但这通常不是一个好的解决方案，因为它太贵了。

Answer 2

查看jQuery caret plugin x-browser兼容功能，以便在文本框或文本区域中管理插入位置或选择。这将允许您移动“输入光标”，如您所述： - ）

这是假设“我现在想知道的是，如何移动输入（光标）”是你的问题，我不是100％明确的。

单击跨度后移动附加输入。

2 个答案: