3

http://jsfiddle.net/DP3aw/2/などのアドレスフィールドを含むフォームがあります

どういうわけか、私は今のように複数のテキスト入力に住所を入れなければなりません。

2番目または3番目の入力をクリックすると、フォーカスが最初のテキストフィールドにジャンプしますが、なぜそれが発生するのですか？とにかくそれを防ぐことができますか？または、js / jQueryを使用してそれが発生しないようにする必要がありますか？

ありがとう！

4

1 に答える 1

4

これは、すべてのINPUT要素がLABELタグ内にあるためです。ラベルをクリックすると、関連する入力がフォーカスされます。すべての入力がラベル内にあるため、すべての入力がラベルをトリガーし、フォーカスが最初の入力（関連付けられている入力）にジャンプします。

修正バージョン： http： //jsfiddle.net/DP3aw/3/

壊れた

<label for="OrgAddr"><span>Address<strong>*</strong></span>
<div><input id="OrgAddr" name="OrgAddr" type="text" class="required" value=""></div>
<div><input id="OrgAddr2" name="OrgAddr2" type="text" value=""></div>
<div><input id="OrgAddr3" name="OrgAddr3" type="text" value=""></div></label>

修理済み

<label for="OrgAddr"><span>Address<strong>*</strong></span></label>
<div><input id="OrgAddr" name="OrgAddr" type="text" class="required" value=""></div>
<div><input id="OrgAddr2" name="OrgAddr2" type="text" value=""></div>
<div><input id="OrgAddr3" name="OrgAddr3" type="text" value=""></div>

可能な改善

FIELDSETこれは、個々の入力ごとに一般的なグループ化とラベルにを使用する、より意味的に正しいバージョンです。また、ラベルをクリックすると、関連する入力要素にフォーカスする方法も示します。

http://jsfiddle.net/njY3U/1/

<fieldset>
<legend>Address</legend>
    <label for="street1">Street 1</label>
    <div><input type="text" id="street1" /></div>

    <label for="street2">Street 2</label>
    <div><input type="text" id="street2" /></div>

    <label for="city">City</label>
    <div><input type="text" id="city" /></div>

    <!-- ETC -->
</fieldset>
于 2012-04-13T21:39:52.477 に答える