Question

I want to to create a link that takes the user to the textarea and allows them to start typing in it instantly. This is my textarea:

<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>

Currently, I just link to it by:

<a href="#commentnow">Post a comment</a>

But this only takes them to the area of which the textarea is, not inside it so that they can start type. In order to do that, they will obviously need to click on it. I have created a fiddle with my current setup.

I would imagine that there are various solutions to this. I would however request a solution that is centred on compatibility (works on all browsers and particularly phone browsers).

Answer 1

Use the .focus() method along with window.location.hash.

<a href="#comment" onclick="window.location.hash = 'comment'; document.getElementById('comment').focus(); return false;">click</a>
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>

Use return false or preventDefault() for this to work everywhere. Chrome/stock browser on android doesn’t require this. Firefox mobile does.

Here’s the fiddle for you to test with. Here’s another example fiddle where the submit is visible while typing.