如何使用鏈接在輸入框之間導航？

Question

如何使用鏈接在輸入框之間導航？ 因此，如果單擊鏈接，它將專注於特定的輸入框。 該解決方案可以使用PHP，CSS，JavaScript或HTML。

所以：

<a href='link1' class='link'>

將導航到/專注於

<input type='text' id='input1' class='input'>

和

<a href='link2' class='link'>

將導航到/專注於

<input type='text' id='input2' class='input'>

PS：我也可能使用jQuery

Answer 1

用這個：

<a href='link1' class='link' onclick="document.getElementById('input1').focus(); return false;">link1</a>
<input type='text' id='input1' class='input'>

根據示例，使用輸入框ID為每個鏈接定義onclick事件

http://jsfiddle.net/jogesh_pi/xWXg6/

替代方案-使用JQuery：

如果您的鏈接和輸入具有相同的類和ID，如下所示：

<a href='link1' class='link'>link1</a>
<input type='text' id='input1' class='input'>

<a href='link2' class='link'>link2</a>
<input type='text' id='input2' class='input'>

然后使用JQuery：

$('.link').each(function(i, e){
    $(this).click(function(ev){
        ev.preventDefault();
        $('#input' + (i+1)).focus();
    });
});

演示2： http ： //jsfiddle.net/jogesh_pi/zNqtB/

Answer 2

您可以為此使用<label> 。

如果要在jQuery中完成。

$( ".link" ).click(function() {
    $('#input1').get(0).focus();  
});

Answer 3

您可以為此使用標簽：

<label for="input1"> input1 label </label>
<input type="text" id="input1">

小提琴

Answer 4

嘗試這個，

$( ".link" ).click(function() {
  $(this).next('input[type="text"]').focus();
});

工作演示