带有占位符的可编辑div中的光标不会出现在Google Chrome中的合适位置
皮埃尔·亚历山大·布沙德
我有一个按钮，editable div用占位符清除了一个简单的符号。
如果在按下按钮之前在可编辑的div中输入两行（通过按Enter换行），则会出现占位符，但光标将位于Google Chrome中可编辑的div旁边。
我在Safari和Firefox上进行了测试，没有问题，光标位于可编辑的div中。
此代码段出了什么问题？（Jsfiddle链接）
HTML：
<div class="textarea" contenteditable="true" placeholder="demo"></div>
<button type="button">press me</button>
CSS：
[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block;
}
.textarea{
border-style: solid;
width: 100px;
outline-width: 0;
cursor: text
}
Javascript：
$('button').click(function(){
$('.textarea').empty();
$('.textarea').focus();
});
周杰夫
好的，这似乎为我解决了该问题，尽管此修复有些怪异。如果设置text为a，blank space它将解决此问题。
我希望其他人可以减少黑客的攻击。
$('button').click(function(e){
$('.textarea').text(' ');
$('.textarea').focus();
console.log($('.textarea')[0].innerText.length);
});
这是一个小提琴展示
编辑
如果要保留占位符，则创建一个范围并设置选择即可解决该问题。
以下是相关代码：
$('button').click(function(e){
$('.textarea').text('');
var range = document.createRange();
var sel = window.getSelection();
range.setStart($('.textarea')[0], 0);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
带有占位符的可编辑div中的光标不会出现在Google Chrome浏览器的合适位置
- 2
Google地图不会出现在Bootstrap Modal中
- 3
带有'x'的信封/矩形框会出现在Chrome的各种网页中
- 4
带有：before伪元素的可编辑div中的光标位置
- 5
UIBarButtonItems不会出现在导航栏中
- 6
哪些字符永远不会出现在URL中？
- 7
ImageView永远不会出现在Android LinearLayout中
- 8
GraphAPI架构扩展不会出现在消息中
- 9
在Eclipse中，Glass不会出现在DDMS下
- 10
引导多选全选不会出现在列表中
- 11
整数不会出现在TextField中
- 12
DevExpress控件不会出现在工具箱中，也不会出现在“添加新项”中
- 13
幽灵用户？用户既不会出现在登录屏幕上，也不会出现在“用户”命令中
- 14
电子邮件中的换行符不会换行，但会出现在消息文本中
- 15
Cookies不会出现在“ Chrome控制台资源”标签中
- 16
Div 仅出现在 Chrome 中
- 17
JTable 中可编辑 JComboBox 的占位符
- 18
刮除没有类名称的Span标记，并且不会出现在所有Elements中
- 19
连续的空间有时会出现在Geany中（我的标准文本编辑器）
- 20
使文本出现在带有换行符的 html 表格单元格中
- 21
在内容可编辑的div中设置光标位置
- 22
在光标位置的可编辑div中插入几个元素
- 23
在DLL中调用CoInitialize / CoUninitialize的合适位置是什么？
- 24
套接字在Flux单向数据流中的合适位置？
- 25
当有人登录时，为什么/ bin / login不会出现在ps输出中
- 26
为什么 MYVAR=something 不会出现在 printenv 中？这与 getenv 函数有关吗？
- 27
如果 NSExtensionActivationRule 仅设置为音频，则共享扩展不会出现在有能力的应用程序中
- 28
为什么 JavaScript 中带有一元运算符 ++ 的变量在下次出现在括号内之前不会将变量更改为 1？
- 29
文本编辑器弹出时，内容可编辑光标位置在可编辑div中
我来说两句