Question

是否可以使用HTML / CSS / Javascript在两个字母边界之间显示虚拟插入符号，例如说没有contenteditable = true的常规div？

假设我有这个：

<div>Hello world</div>

我点击“世界”中的“w”和“o”之间，是否可以显示虚拟插入符号，如下所示：

你好w] [orld

Answer 1

至少你有2个解决方案可以在鼠标光标下的某个元素的文本中获取字符（和相关位置）。第一个是将每个字符包装在<span>或其他元素中，为<span>元素附加一些click事件处理程序，您已经完成了。第二种是使用与Range对象相关的方法（当然只有纯JS支持）。我想使用第一种方法，因为它更快。使用Range方法需要在每次单击时循环，单击大文本末尾可能会导致一些不良性能。对于虚拟插入符号，您可以创建一些内联块元素，在其上渲染插入符号（例如通过使用边框结合线性渐变背景，...），即使透明的png图像也可以提供帮助。因为它需要一个空间来渲染插入符号，所以可以使用负边距（左右）来绘制两侧靠近的文本。这是代码细节：

<强> HTML ：

<div class='inter-letters'>Click on one of the characters ...</div>

<强> CSS ：

.v-caret {
  width:.5em;
  height:1em;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
  background:linear-gradient(to right, transparent .23em, currentColor .25em, transparent .27em);
  display:inline-block;    
  vertical-align:middle;    
  margin:0 -.2em;
  display:none;
}
.inter-letters {
  font-size:30px;
  color:green;
}

<强> JS ：

$('.inter-letters').on('click','span.letter', function(){
  virtualCaret.css('display','inline-block');
  $(this).after(virtualCaret);
}).html(function(i,oldhtml){
          return oldhtml.replace(/./g,"<span class='letter'>$&</span>");
        });
var virtualCaret = $('<div>').addClass('v-caret').appendTo('.inter-letters');
//clicking outside the div should hide the virtual caret
$(document).click(function(e){    
  if(!$('.inter-letters').has(e.target).length) {        
     virtualCaret.css('display','none');
  }    
});

Demo.

Answer 2

如果你有一个等宽脚本，你可以在一个绝对点上创建一条线。

假设所有字符均为7px宽度

$('#div').click(function (e) { //Offset mouse Position
    var posX = $(this).offset().left, // get offset of click
    var caretX = Math.floor(posX/7); // take all whole character
    caretX += posX%7 > 7/2 ? 1 : 0; // if not exactly clicked between two chars, decide which way to shift

    // You can now user caretX as X position for a caretline
    // element to be placed absolute
});

Using jQuery how to get click coordinates on the target element

Answer 3

HTML：

<div id="div">some text</div>

使用Javascript：

var str=document.getElementById("div").innerHTML;
document.getElementById("div").onclick=function () {
    var index = window.getSelection().focusOffset;
    document.getElementById("div").innerHTML=str.substr(0,index) + "][" + str.substr(index);
}

在不可编辑的字段中显示插入位置

3 个答案:

Demo.