在chrome和Firefox中,可争用div处的光标不是占位符的开始,而它在chrome和Firefox中工作良好。
<div id="" class="chatInput" contenteditable="true" placeholder="Type something..." autofocus="autofocus"></div>
.cInput{
padding: 5px 15px;
color: var(--text-base-volumeone);
outline: none;
cursor: text;
max-height: 32px;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
min-height: 32px;
font-family: LATORegular;
font-size: 13px;
vertical-align: bottom;
transition: border-color 0.25s ease;
caret-color: var(--caret-color);
position: relative;
white-space: initial;
}
我尝试搜索该问题,它看起来像是MS Edge旧版浏览器中的一个已知问题。
下面是一个变通方法,您可以尝试使用MS Edge旧版浏览器。
null
<!DOCTYPE html>
<html>
<head>
<style>
[contenteditable=true] {
position: relative;
}
[contenteditable=true]:empty:before {
content: attr(placeholder);
position: absolute;
left: 0;
right: 0;
top: 4px;
margin: auto;
}
#myDiv {
border: 1px dashed #AAA;
width: 290px;
padding: 5px;
text-align: left;
height: 16px;
}
</style>
</head>
<body>
<div id="myDiv" contenteditable="true" placeholder="Enter text here..."></div>
</body>
</html>