按下右箭头键时光标消失

内容可编辑div具有跨度和简单文本等html元素。按下右箭头键时光标消失

.ing-tag_0{ 
 
color:white; 
 
background-color: blue; 
 
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span><span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span></div>

将光标移动到div的末尾。从光标的末端连续按下左箭头键不断移动跨度。这可以正常工作。

现在将光标移动到div的开头，然后尝试通过连续按右箭头键移动到div的右侧，然后光标在遇到跨度时的某个点消失。

我在哪里错了。

请建议一种方式，如果我按右箭头光标移动到结束通过通过div。

跨度不得为可编辑内容，因为这些是固定的。

编辑

我没有任何其他的选项来改变这种状况。我已经尝试添加零宽度的空格。

这对safari无效。
如果用户删除此空格，该怎么办？光标再次消失。

来源

2017-09-14 Akhil Sahu

很多貌似https://stackoverflow.com/questions/46215933/get-and-set-the-position-of-the-cursor-in-content-editable-div ？noredirect = 1只是不同的用户 –

如果你也是“ser cha”，那么再次提出同样的问题是没有意义的 –

我不能跟着链接 –

只需在每个<span>之间添加空格。最后，div里面放置了一个零宽度空间（）。希望这能解决你的问题！

.ing-tag_0{ 
 
color: white; 
 
background-color: cyan; 
 
}

<div value="" id="step_input_0" name="step" placeholder="Tell us about step 1" class="input stepbox step_input" contenteditable="true">sdf dsaf asdf s <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span> <span data-class="method" class="ing-tag_0" contenteditable="false"> sdfcxz </span>&#8203;</div>

来源

2017-09-14 11:47:49 Booligoosh

我已经尝试过，请检查编辑 –

按下右箭头键时光标消失

回答

相关问题