光标位置不在Microsoft Edge的cotenedit div中占位符的开头

问题描述 投票：0回答：1

conteneditable div上的光标不是占位符的开始，而在chrome和firefox中可以正常工作。

div是自动聚焦的，并且光标必须从头开始显示。

enter image description here

html

<div id="" class="chatInput" contenteditable="true" placeholder="Type something..." autofocus="autofocus"></div>

css

.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;
}
html css cursor microsoft-edge contenteditable
1个回答
0
投票

我尝试搜索该问题，它看起来像是MS Edge旧版浏览器中的已知问题。

这里是您可以尝试使用MS Edge旧版浏览器的一种解决方法。

<!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>

MS Edge旧版浏览器中的输出：

enter image description here

此解决方案使用CSS代码。我们可以注意到，光标在div外几乎没有显示。如果这不是最好的选择，那么您可能需要使用JavaScript或Jquery在开始位置显示光标。

This example使用JQuery。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.