Положение курсора в Firefox в конце с использованием div contenteditable - PullRequest
0 голосов
/ 06 февраля 2019

Я вынужден использовать <div contenteditable="true" class="div-contenteditable"></div>, что делает позицию курсора в конце в Firefox, когда она пуста, и проблема возникает только при первом щелчке, при втором щелчке по тому же элементу div курсор возвращается в исходное положение. enter image description here

Когда я пишу что-то внутри него и удаляю полный текст, нажимаю за пределами этого 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.

Я попытался добавить &zwnj; до начала и окончания элемента 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>

1 Ответ

0 голосов
/ 27 февраля 2019

Я заставил его работать с помощью display: block, у меня возникло несколько проблем с полем, чтобы установить маржу также, это работало для меня во всех браузерах

...