Я вынужден использовать <div contenteditable="true" class="div-contenteditable"></div>
, что делает позицию курсора в конце в Firefox, когда она пуста, и проблема возникает только при первом щелчке, при втором щелчке по тому же элементу div курсор возвращается в исходное положение.
Когда я пишу что-то внутри него и удаляю полный текст, нажимаю за пределами этого div и снова нажимаю его, я снова сталкиваюсь с этой проблемой.При наборе курсор автоматически фиксирует свою позицию и устанавливается в нужном месте.Css, который я написал:
.div-contenteditable {
height: auto;
padding: 10px;
width: 100%;
border: unset;
display: block;
word-wrap: break-word;
position: relative;
-moz-user-select: text;
cursor: pointer;
min-height: 41px;
}
.div-contenteditable:before {
content: "\feff";
}
Я использую display: block;потому что в Safari использование inline-block делает размер курсора больше, чем div.
Я попытался добавить ‌
до начала и окончания элемента div, затем div немного сдвинулся вниз, а затем я не получил проблемы с курсоромв ФФ.Я попытался добавить <br />
в div, но это не решило проблему FF.Пожалуйста, помогите мне, поскольку я новичок в HTML и CSS
.div-contenteditable {
height: auto;
padding: 10px;
width: 100%;
border: unset;
display: block;
word-wrap: break-word;
position: relative;
-moz-user-select: text;
cursor: pointer;
min-height: 41px;
}
.div-contenteditable:before {
content: "\feff";
}
<table> <thead> <tr> <th>English</th> </tr> </thead> <tbody> <tr><td><div contenteditable="true" class="div-contenteditable"></div></td></tbody> </table>