Question

How do I set the cursor on a div-element in javascript?

I have a form(div-element not input) with a textstring attached on it. I want the textstring removed and the cursor set at the beginning of the element onclick.

I have removed the content in the div-element with onclick event with: divElement.innerHTML = '';

Now I want the cursor to be set?

Answer 1

If by ‘cursor’, you mean the text cursor (aka the caret), I presume what you’re really asking is how to make a div into an editable content box.

What you need is to set the contentEditable attribute on your div.

If you want it editable from the start, just include it in your HTML code:

<div contentEditable="true">....</div>

If you want to switch it on/off, you can set it in javascript:

mydiv.contentEditable="true"

However, the only time I can think of when it’s better to use contentEditable rather than a textarea is if you’re writing a WYSIWYG HTML editor.

Most of the rest of the time I would say it’s probably preferable to use a <textarea>. You can style it to look like the rest of your page, and you can make it readonly or disabled when you don’t want it changed. But it is much easier to work with in a form and in Javascript. The problem with using a div is that it can contain other html tags, which may affect how it works, and will likely open you up to security problems if you make it directly editable.