Question

我想创建一个链接，将用户带到textarea并允许他们立即开始输入。这是我的textarea：

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

目前，我只是通过以下方式链接到它：

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

但这只会将它们带到textarea所在的区域，而不是它内部，以便它们可以开始输入。为了做到这一点，他们显然需要点击它。我使用当前的设置创建了fiddle。

我想可以有各种解决方案。然而，我会请求一个以兼容性为中心的解决方案（适用于所有浏览器，特别是手机浏览器）。

Answer 1

使用.focus()方法和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>

使用return false或preventDefault()来实现此目的。 Android上的Chrome / stock浏览器并不需要这样。 Firefox移动版。

这是您要测试的fiddle。这是另一个示例fiddle，其中提交在输入时可见。

Answer 2

当可以使用普通的HTML元素时，您不需要使用JavaScript;考虑到这一点，只需使用label元素，而不是a，因为label元素正好符合您的要求：

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

JS Fiddle demo

for的{{1}}属性必须等于您要关注的元素的label，并与id相关联。

回应OP的评论（在下面的评论中）：

两个问题：兼容性如何？如何将其设为可点击文本的按钮（鼠标悬停时光标会发生变化）......？

为了解决兼容性问题，自{4.0}以来label元素一直存在，我没有遇到过无法使用的浏览器（包括IE 7，我不记得在IE 6中使用它了）虽然）。

要让它看起来像一个按钮，只需使用CSS（就像将label元素设置为按钮一样，例如：

JS Fiddle demo，这不是一个特别漂亮的例子，但确实表明造型可能性存在并且与这方面的任何其他元素没有什么不同。

Answer 3

使用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;
});

链接到textarea

3 个答案: