Link to textarea

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.

Answer 2

You don't need to use JavaScript for this, when normal HTML elements can be used; with that in mind just use a label element, instead of an a , since your requirements are precisely met by the label element:

<label for="commentnow">Post a comment</label>
<textarea id="commentnow" name="comment" cols="45" rows="8" aria-required="true"></textarea>​

JS Fiddle demo .

The for attribute of the label must be equal to the id of the element you want to focus on, and associate with, the label .

In response to comment from OP (in comments, below):

Two questions: How about compatibility and how can I make it a button where the text is clickable (cursor changes when hovering)...?

To address compatibility, the label element's been around since HTML 4.01 and I've not come across a browser that doesn't work with it (including IE 7, I can't remember using it with IE 6 though).

To make it appear like a button, just use CSS (in the same way you'd style an a element to appear like a button, for example:

label {
    color: #666;
    display: inline-block;
    padding: 0.3em 0.5em;
    border: 1px solid #aaa;
    background-color: #eee;
    margin: 0.5em;
}

label:hover,
label:active,
label:focus {
    color: #f90;
    box-shadow: 0 0 0.3em #f90;
}

JS Fiddle demo , this isn't a particularly beautiful example, but does show that styling possibilities both exist and are no different than any other element in that regard.

Answer 3

Simple try this using jQuery:

<a class="link" href="#">Post a comment</a>
<textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea

$(".link").click(function(){
    $("#comment").focus();
    return false;
});