Question

我正在尝试编写类似textarea的东西，只是为了训练。

我有一个div（用户生成的）文本：

<div id="editor">Hello! I am a Text!</div>

例如，如果我在“Hello”的两个“L”之间单击（使用鼠标左键），我希望看到：

<div id="editor">Hel<div id="cursor">|</div>lo! I am a Text!</div>

我如何实现这一目标？到现在为止，我正在做......

//HTML
<div id="editor" onclick="setCursorWithMouse()"><!-- User-Text --></div>

//jQuery
function setCursorWithMouse(){
    $('#editor').append('<div id="cursor">|</div>');
}

...但是，当然，它只是将光标添加到div的末尾。

我怎样才能知道用户点击的确切位置，添加光标（或其他）的位置，文本的拆分位置？

由于

编辑：

我不想使用contenteditable！只需这样看：我想在鼠标点击位置分割一个字符串。
我知道.append（）不是我想要的！ .append（）只是一个占位符，用于以后更好的功能。我现在要求的这个功能。
我使用固定宽度的字体。

Answer 1

尽可能接近： DEMO

var clicked=false;
$('#editor').click(function(e){
    $(this).addClass('active');
    var letterWidth=7;
    $('#editor span').remove();
    var clickPos=e.pageX-$(this).offset().left;
    if(!clicked) clickPos+letterWidth;
    var letter=Math.round(clickPos/letterWidth);
    var before=$(this).html().substr(0,letter);
    var after=$(this).html().substr(letter,$(this).html().length);
    $(this).html(before+'<span>|</span>'+after);
    clicked=true;
});
$(document).click(function(e){
    if(!$('#editor').is(e.target)){
        $('#editor').removeClass('active');
        $('#editor span').remove();
        clicked=false;
    }
});

我希望它足够接近！：）

注意：

假设font-size为16px！
，编写此代码
我担心你必须计算font-size以进一步扩展。

Answer 2

注意，不会在firefox上返回预期的结果; chrome返回预期结果，但如果鼠标没有缓慢释放，光标可能会向左或向右移动1个字符。

＆＃13;

$(function() {
  $(document).data("text", $("#editor").text())
    .on("mousedown", function() {
      $("#editor")
        .html($(this)
          .data("text"))
    })
    .on("mouseup", function() {
      that = $("#editor");
      var sel = window.getSelection ? window.getSelection() : document.selection();
      var o = that.text();
      var before = sel.baseOffset;
      var after = o.length - before;
      var a = o.slice(0, before);
      var b = after === 0 ? "" : o.slice(-after);
      var n = "<data>|</data>";
      var html = (after === "" ? a + n : a + n + b);
      that.html(html);
    });
})

＆＃13;

#editor {
  font-family: Sans;
  font-size: 28px;
  letter-spacing: 8px;
  white-space: pre;
}
#editor > data {
  color: red;
  max-width: .1em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div tabindex="0" id="editor">Hello! I am a Text!</div>

＆＃13;

jsfiddle http://jsfiddle.net/guest271314/maakff7q/

jQuery：在鼠标单击位置拆分文本

2 个答案: