链接到文本区

Link to textarea

本文关键字：文本区 链接      更新时间：2023-09-26

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

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

目前，我只是链接到它:

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

但是这只会将它们带到textarea所在的区域，而不是在textarea内部，以便它们可以开始键入。为了做到这一点，他们显然需要点击它。

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

将.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可以。

这是你要测试的小提琴。下面是另一个示例，在输入

时提交是可见的。

你不需要使用JavaScript，当普通的HTML元素可以使用;考虑到这一点，只需使用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.

label的for属性必须等于您想要关注并与label关联的元素的id属性。

回应OP的评论(在下面的评论中):

两个问题:如何兼容性和我如何使它成为一个按钮，文本是可点击的(光标改变时悬停)…?

为了解决兼容性问题，label元素自HTML 4.01以来一直存在，我还没有遇到一个浏览器不支持它(包括IE 7，但我不记得在IE 6中使用它)。

要使它看起来像一个按钮，只需使用CSS(与您将a元素设置为按钮的方式相同)，例如:

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;
}
这不是一个特别漂亮的例子，但它确实显示了存在的样式可能性和其他元素在这方面没有什么不同。

简单试试用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;
});
相关文章：