提问者:小点点

游标位置不在Microsoft Edge中coteneditable div中占位符的开头


在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;
}

共1个答案

匿名用户

我尝试搜索该问题,它看起来像是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>