0
Well, I’m having trouble with a "contenteditable" Div, which briefly uses ". replace() and regex" with a bit of jquery to be able to work with dynamic content, the problem in general is that the cursor position or better saying "Caret" is suffering a visual bug. The Caret is always in the "start" or initial position, when it should be positioned at the end of each letter or word typed.
Below is my simplified code:
list = ['cat', 'bird'];
reg = new RegExp(list.join("|"), 'gi');
$("#editable").bind('input propertychange', function(event) {
document.getElementById('editable').innerHTML = $(this).html().replace(reg, "dog");
}); * {box-sizing: border-box;}
.si{min-width: 100%;min-height: 100%;}
.def{background-color: cadetblue; color: white; padding: 0.5rem;}
#content{height: 12rem;width: 100%;overflow-x: auto;overflow-y: auto;position: relative;resize: both;}
#editable * {white-space:pre!important;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<main id="content">
<div contenteditable="true" id="editable" spellcheck="false" class="si def"></div>
</main>I’ve also tried to use some tricks as for example:
document.getElementById('editable').focus();
document.execCommand('selectAll', false, null);
document.getSelection().collapseToEnd();
However, this solution causes me another visual bug: I realized that when trying to delete any content inside the div, in any position, using "Backspace", the Caret is sent to the end of the element. That’s the purpose of the code, sending the Ret to the end, but that’s not what I’d like to get.
Simply put, I would like a solution to position the Caret correctly within the Div, considering that I also want to position it correctly when "Backspace".
Any other css/html level correction is welcome, but just remembering that using "textarea" is not my goal.
Thanks in advance.
You’ll hardly be able to do that. I was at least doing something like this with editable div and I spent 3 days trying it and I couldn’t. You would have to do a function that returns the position of the Caret, but with editable div this does not work right because when you press enter, a div is created that does the line break, and you would have to fetch the position of the Caret within that div and not the main div, which is a problem. If your div is intended to contain plain text only, use textarea which is the "same thing" and the methods of positioning Caret work well on it.
– Sam
Yes 20 days ago, I have created numerous documents, and the penultimate of them worked correctly, but in the matter of optimization, leaves a little to be desired and has some bugs in firefox, so I created this simplified version, to find a solution that helps me in this issue, so I’ll have the last piece of the puzzle. Textarea really is better for working with Ret, but that’s beside the point, because I don’t want to just add text. Anyway, thank you!
– Lima