I asked teratail the same question, but I couldn't get an answer, so I would like to ask you a question.
I would appreciate it if you could let me know if anyone knows.
Safari only occurs.
If the following conditions are met in the contenttable element, the tag will be removed automatically.
position:relative; specifiedI have prepared a demo, so please access it from safari and try it.
https://codepen.io/KimTom/pen/poJNzqp
The border disappears when you enter Japanese after a new line.
If you look at the developer tool, you will see that the div tag has been removed and only the text inside is included.
I would appreciate it if you could tell me how to keep the position:relative; and prevent the tag from being removed.
I'd appreciate it if the solution was js.
The teratail Eggpan's answer in the questionnaire solved this question.The answer seems to solve the problem by inserting a zero-width space when a new line is broken, and then deleting the zero-width space later [1].
[1][1]If there are no characters at the beginning of the line, it seems to be a problem if you type in Japanese, so
Why don't you fill in the zero-width space when you break a new line?
constel= document.querySelector('.pos-rel')
el.addEventListener("keyup", event=>{
if(event.keyCode===13){
document.execCommand('insertText', false, '\u200B')
}
});
I can't see the zero width space on the screen, but it's a character, so I think it's necessary to delete it at some time.
Also, if you type in Japanese after deleting the inserted zero-width space, the same thing will happen.
ContentEditable itself has different behavior and strange behavior, so it seems that it is not widely used, so I think it will smell muddy to some extent.
© 2024 OneMinuteCode. All rights reserved.