在不可编辑字段中显示插入符号位置答案

【问题标题】：Show caret position in non-editable field在不可编辑字段中显示插入符号位置
【发布时间】：2014-06-28 00:47:36
【问题描述】：

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

假设我有这个：

<div>Hello world</div>

我在“world”中的“w”和“o”之间单击，是否可以显示一个虚拟插入符号，使其看起来像：

你好 w][orld

【问题讨论】：

不使用 HTML+CSS+JS，抱歉。在页面中显示插入符号是由用户控制的浏览器设置，不能被网页修改（假设浏览器完全支持此功能）。
谢谢。我本身不需要浏览器插入符号，只需获取单击 div 的字符串中的索引位置就足够了，我可以使用 div 和 abs 定位覆盖“虚拟”插入符号

标签： javascript html css

【解决方案1】：

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

【讨论】：

请注意，IE 9 支持 focusOffset（以及 SelectionRange）。无论如何，这是一个非常简单的解决方案 +1，之前不知道 focusOffset。跨度>
我最终选择了一个变体 - 使用 focusOffset 但覆盖光标反而给出了一个非常干净的解决方案 - jsfiddle.net/fkpv8

【解决方案2】：

至少您有两种解决方案可以在鼠标光标下的某些元素的文本中获取字符（和相关位置）。第一个是将每个字符包装在<span> 或其他元素中，为<span> 元素附加一些单击事件处理程序，然后您就完成了。二是使用Range对象相关的方法（当然只有纯JS支持）。我想使用第一种方法，因为它更快。使用Range 的方式，每次点击都需要循环，点击大文本的末尾可能会导致一些不好的性能。对于虚拟插入符号，您可以创建一些 inline-block 元素，在其上渲染插入符号（例如通过使用边框与线性渐变背景相结合，......）甚至透明的 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.

【讨论】：

【解决方案3】：

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

假设所有字符都是 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

【讨论】：