1

ユーザーをテキストエリアに移動させ、すぐに入力を開始できるリンクを作成したいと思います。これは私のテキストエリアです：

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

現在、私はそれにリンクするだけです：

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

ただし、これにより、テキストエリア内ではなく、テキストエリアが存在する領域に移動するだけで、入力を開始できます。それをするために、彼らは明らかにそれをクリックする必要があるでしょう。現在の設定でフィドルを作成しました。

これにはさまざまな解決策があると思います。ただし、互換性を中心としたソリューションを要求します（すべてのブラウザー、特に電話ブラウザーで機能します）。

4

3 に答える 3

7

.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/ストックブラウザはこれを必要としません。Firefoxモバイルはそうします。

これがあなたがテストするためのフィドルです。入力中に送信が表示される別のフィドルの例を次に示します。

于 2012-12-28T16:46:53.583 に答える
1

通常のHTML要素を使用できる場合は、JavaScriptを使用する必要はありません。そのことを念頭に置いて、要件は要素によって正確に満たされるため、の代わりに要素を使用してくださいlabel。alabel

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

JSフィドルデモ。

のfor属性は、フォーカスし、関連付ける要素のの属性labelと同じである必要があります。idlabel

OPからのコメントに応えて（以下のコメントで）：

2つの質問：互換性についてはどうですか？テキストをクリック可能なボタンにする方法（ホバーするとカーソルが変わる）...？

互換性に対処するために、この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;
}

JS Fiddleデモ、これは特に美しい例ではありませんが、スタイリングの可能性が存在し、その点で他の要素と何ら変わらないことを示しています。

于 2012-12-28T16:50:48.860 に答える
0

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;
});
于 2012-12-28T17:08:57.820 に答える