Member Avatar for shadiadiph

is there any easy way to set a cursor to a div so that you can type in a div onclick?

  • 5 Contributors
  • 6 Replies
  • 727 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by lambing

Dani AI

Generated

If the goal is true in-place rich text (change fonts, bold parts, mix sizes) the cleanest approach is to make the element editable with the browser's contentEditable support rather than trying to force a textarea to behave like a rich editor. That directly gives you a caret, selection, and the ability to insert styled HTML while the user types. This addresses the styling limitation mentioned, and avoids the textarea-only tradeoff noted by and .

A minimal pattern (make the div focusable, focus it on click, and move the caret) looks like this:

<div id="editor" contenteditable="true" tabindex="0" style="min-height:80px; white-space:pre-wrap;"></div>

<script>
function placeCaretAtEnd(el) {
  el.focus();
  if (window.getSelection && document.createRange) {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (document.body.createTextRange) {
    var tr = document.body.createTextRange();
    tr.moveToElementText(el);
    tr.collapse(false);
    tr.select();
  }
}
document.getElementById('editor').addEventListener('click', function() {
  placeCaretAtEnd(this);
});
</script>

Notes and caveats: add tabindex="0" so the div can receive focus. Use the Selection/Range APIs (as suggested) to place the caret programmatically. Sanitize pasted HTML on paste, handle IME/composition events for non-Latin input, and expect some browser inconsistencies (some shortcuts are captured by the browser; see 's point). For anything beyond a simple editor (undo, clean paste, toolbars, cross-browser quirks) use a maintained editor library (TinyMCE, Quill, CKEditor, Draft.js) rather than rolling every edge case yourself.

Recommended Answers

All 6 Replies

Member Avatar for MartinRinehart

is there any easy way to set a cursor to a div so that you can type in a div onclick?

Use a textarea in the div.

Member Avatar for fornandakishore

Yes, you can use TEXTAREA inside that div

e.g. <textarea cols="40" rows="5" style="background:none; border:medium none;"></textarea>

Member Avatar for shadiadiph

I have tried using a textarea for the last three days but i want the user to be able to change the font styles while typing it is impossible to have two conflicting styles in a textarea

Member Avatar for MartinRinehart

I have tried using a textarea for the last three days but i want the user to be able to change the font styles while typing it is impossible to have two conflicting styles in a textarea

Correct. I've looked at this in wanting to write a good code editor in JS. I love JS but have concluded that it can't be done. To have decent keyboard sensitivity, you have to use a textarea, not a more generic element. Textareas, however, have limits such as the one you noted.

Try a div and listen for keys up or down. Test arrow keys, Insert, Delete and whatever elese you care about. Let us know if you can get your job done. I just discarded the idea of doing keyboard shortcuts in an app because I couldn't get the shortcuts past the browser's listening for, and not passing on, their own shortcuts.

One more gotcha. JS strings are immutable. String += char is going to create a new string. Slow. Pushing new chars onto an array of char will be a lot faster.

Member Avatar for Taywin

You can do it either in div or textarea; however, the approach is a bit different. You need a highlight for div because there is no cursor location in div display (only highlight). In textarea, you can get the current cursor or highlight area. I did it for the company I am working for (and it is cross-browser), but I cannot disclose the code because it is proprietary code. Also, it requires a bit more understanding in JavaScript.

So what I can tell you is to look for range selection as I said in other two threads. If you want to see an example for textarea, look how tinyMCE (WYSIWYG editor) does with their code. It does what you are looking for in text area. Though, you need to understand it before you utilize it to the way you want.

Member Avatar for lambing

Hi, I have done this before, writing a text on a diva.. wow, it's really cool. So how would you do that? First, you must have a div element and a form with an input type text. You must set the width and the height of the div element to wrap up the text element. You must set the border of the text box to 0 and it's width to 1px.

Then, what you have to do is to apply some JavaScript on the div element. Use the onclick event around the div and inside the onclick function your cursor should focus on the text box using focus() method. Then, add another keydown and keypress event on the text box. Everytime the user types on something, you should set the innerHTML of the div with what was typed in the texbox. And that's it, you just have to play around your css to make it work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.