Question

我目前有这个功能，它将一个“输入”附加到＃cursor-start 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();

}

我现在要做的是在最近的跨度之后添加输入，如果它是exitst。键入时会调用其他名为enterText和markCursor的函数：

jQuery.fn.markCursor = function(e){
    $(this).focus();
   $(this).keyup(function(e) {
  $cursorStart.enterText(e);

});

};

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);



}
    });

我现在想要根据用户点击的位置定位输入，.offset（）或.position（）在这里有帮助吗？

HTML：

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

在a和b附近点击会在“a”

之后产生输入

Answer 1

而不是在#main-edit上收听点击，而是倾听span自己的点击次数：

$('#main-edit span').click(function() {
    $(this).after('<input type="text" id="cursor" />');
});

或使用delegate：

$('#main-edit').delegate('span', 'click', function() {
    $(this).after('<input type="text" id="cursor" />');
});

这是小提琴：http://jsfiddle.net/YxfWX/

最近的跨度之后的位置输入，如果存在，则在jquery中

1 个答案: