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

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

假设我有这个：

<div>Hello world</div>

你好，世界

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

你好，w世界

---

至少你有两个解决方案来获得一个角色（和相关职位）在鼠标光标下的某个元素文本中。第一个是将每个字符包装在一个

或其他元素中，为

元素附加一些单击事件处理程序，您就完成了。第二个是使用与

范围

对象相关的方法（当然只有纯JS支持）。我想使用第一种方法，因为它要快得多。使用

Range

方法需要在每次单击时循环，在大文本的末尾单击可能会导致性能下降。对于虚拟插入符号，可以创建一些内联块元素，在其上呈现插入符号（例如使用边框与线性渐变背景相结合，…）即使是透明的png图像也会有所帮助。因为它需要一个空间来呈现插入符号，所以可以使用负边距（用于左侧和右侧）在两侧近距离绘制文本。以下是代码详细信息：

HTML：

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

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

$('.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');
  }    
});

JS：

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

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

$('.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');
  }    
});

$（'.inter-letters'）。on（'click'，'span.letter'，function（）{
css（'display'，'inline-block'）；
$（this）.after（virtualCaret）；
}).html（函数（i，oldhtml）{
返回旧HTML。替换（//g，“$&”）；
});
var virtualCaret=$（''）.addClass（'v-caret'）.appendTo（'.inter-letters'）；
//在div外部单击应隐藏虚拟插入符号
$（文档）。单击（函数（e）{
如果（！$（'.inter-letters'）.has（e.target）.length{
css（'display'，'none'）；
}    
});

---

至少你有两个解决方案来获得一个角色（和相关职位）在鼠标光标下的某个元素文本中。第一个是将每个字符包装在一个

或其他元素中，为

元素附加一些单击事件处理程序，您就完成了。第二个是使用与

范围

对象相关的方法（当然只有纯JS支持）。我想使用第一种方法，因为它要快得多。使用

Range

方法需要在每次单击时循环，在大文本的末尾单击可能会导致性能下降。对于虚拟插入符号，可以创建一些内联块元素，在其上呈现插入符号（例如使用边框与线性渐变背景相结合，…）即使是透明的png图像也会有所帮助。因为它需要一个空间来呈现插入符号，所以可以使用负边距（用于左侧和右侧）在两侧近距离绘制文本。以下是代码详细信息：

HTML：

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

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

$('.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');
  }    
});

JS：

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

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

$('.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');
  }    
});

$（'.inter-letters'）。on（'click'，'span.letter'，function（）{
css（'display'，'inline-block'）；
$（this）.after（virtualCaret）；
}).html（函数（i，oldhtml）{
返回旧HTML。替换（//g，“$&”）；
});
var virtualCaret=$（''）.addClass（'v-caret'）.appendTo（'.inter-letters'）；
//在div外部单击应隐藏虚拟插入符号
$（文档）。单击（函数（e）{
如果（！$（'.inter-letters'）.has（e.target）.length{
css（'display'，'none'）；
}    
});

---

如果你有一个单空间脚本，你可以在一个绝对点上画一条线

假设所有字符的宽度均为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
});

---

如果你有一个单空间脚本，你可以在一个绝对点上画一条线

假设所有字符的宽度均为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
});

HTML：

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

HTML:

---

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

焦点偏移量

（以及选择范围）IE 9支持。无论如何，这是一个非常简单的解决方案+1，之前不知道

focusOffset

。我最后使用了一个变体-使用focusOffset，但覆盖光标，给出了一个非常干净的解决方案-注意

focusOffset

（以及SelectionRange）IE 9支持。无论如何，这是一个非常简单的解决方案+1，之前不知道

focusOffset

。我最后使用了一个变体-使用focusOffset，但覆盖光标，给出了一个非常干净的解决方案-