带有占位符的可编辑div中的光标不会出现在Google Chrome浏览器的合适位置

Pier-Alexandre Bouchard 发表于 Dev

皮埃尔·亚历山大·布沙德

我有一个按钮，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] 删除。