I am working on my code to select on the text in the contenteditable while I click on a button and select on a input box. I have got a problem with the selected text, because when I selected on the text and when I click on the button to display the modal and when I click on the input textbox, the selected text in the contenteditable will get disappear everytime when I click on the input textbox.
I have tried this:
user-select: none;
It didn't work so here is the full code:
<div id="quickreply" class="reply-message" hidefocus="false" aria-label="Message Body" g_editable="true" role="textbox" aria-hidden="true" aria-multiline="true" contenteditable="true" tabindex="1" style="direction: ltr;min-height: 135px;width: 840px;padding-left: 25px;font-size: 13px;user-select: none;" itacorner="6,7:1,1,0,0">Some texts goes here</div>
<div id="insert-link" class="link" command="+link" data-toggle="tooltip" data-placement="bottom" title="" role="button" unselectable="on" style="user-select: none; align-items: center; border: none; display: inline-flex; justify-content: center; width: 26px; height: 26px; cursor: pointer; line-height: 20px; list-style: none; padding: 0 0 0 12px; position: relative; outline: none; z-index: 0;" data-original-title="Insert link (Ctrl-K)"></div>
<div id="editlink_dialog" class="Kj-JD LW-JD" tabindex="0" role="dialog" aria-labelledby=":vm" style="left: 201.5px; top: 172.5px; user-select: none; display: flex;">
<span style="position:relative;bottom: 2px;padding-right:1px;white-space:nowrap;" id="linkdialog-text-label">Text to display: </span>
<input id="linkdialog-text" aria-labelledby="linkdialog-text-label" style="user-select: none; width: 80%;border: 1px solid #a9a9a9;">
</div>
What I'm expecting to achieve is when I select on the text in the contenteditable while I click on a button and select on a input box, I want to keep selected on the text in the contenteditable so I can change the text I want.
Can you please show me an example how I could do this?
Thank you.
