我有一个具有 contenteditable="true"
属性的 div,它可以工作,但是 chrome (Ubuntu 14.04) 将光标放在 div 之外,如下图所示:
为什么要这样做?我正在使用此 html(带有 smarty):
<div class="col-sm-6">
<div class="form-control" contenteditable="true" id="tags">
<div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
<div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
</div>
</div>
我将其用于 css:
.tag{
background-color: #01b6ef;
color: #012935;
display: inline-block;
padding: 1px 5px;
margin-right: 3px;
}
.tag a{
color: #ffffff;
margin-left: 5px;
font-size: 12px;
}
.tag a:hover{
color: #ffffff;
}
这是一个 chrome 错误,还是我可以修复的问题,以及如何修复?
最佳答案
我能够通过向表单控件添加 input-group
来解决问题,如下所示:
<div class="col-sm-6">
<div class="form-control" contenteditable="true" id="tags">
<div class="input-group">
<div contenteditable="false" class="tag">one <a href="" class="glyphicon glyphicon-remove"></a></div>
<div contenteditable="false" class="tag">two <a href="" class="glyphicon glyphicon-remove"></a></div>
</div>
</div>
</div>
你可以在这里看到 fiddle :http://jsfiddle.net/y3ms3f7a/5/
关于html - 在 div 之外的 Contenteditable div 游标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29462773/