Can I use autofocus on an element with contenteditable?

text input contenteditable autofocus
daGUY picture daGUY · Jul 13, 2012 · Viewed 15.1k times · Source

I'm using the contenteditable attribute on a <div> in order to make it act as a text field on demand (for users to rename something). But I want to enable autofocus on it as well, so users can begin typing immediately (the <div> always has contenteditable enabled initially).

Is this valid and/or possible? Or will I have to switch to a standard text input?

Answer

Tim Down picture Tim Down · Jul 14, 2012

You'll have to do it with JavaScript in most browsers, I think. And it won't work on iOS, which only allows programmatic use of focus() in an event handler of a genuine user interaction (such as a click or touch-related event).

Also, be aware that if there other inputs on the page, it's possible the user may focus on one of those before the document has completely loaded, in which case it is then very annoying for the user to find that the focus has been moved from under them when the load event does fire, so you should use the inputs' focus events to track this.

<div contenteditable="true" id="editable"></div>

<script type="text/javascript">
    window.onload = function() {
        document.getElementById("editable").focus();
    };
</script>

Related questions

How to get an input text value in JavaScript

How go get an input text value in JavaScript? <script language="javascript" type="text/javascript"> lol = document.getElementById('lolz').value; function kk(){ alert(lol); } </script> <body> <input type="text" name="enter" class="enter" …

Read More
Input text dialog Android

When a user clicks a Button in my App (which is printed in a SurfaceView), I'd like a text Dialog to appear and I would like to store the result in a String. I'd like the text Dialog to overlay …

Read More
Add padding to HTML text input field

I want to add some space to the right of an <input type="text" /> so that there's some empty space on the right of the field. So, instead of , I'd get . So, same behavior just some empty space …

Read More