如何使用链接在输入框之间导航?

时间:2013-11-28 12:05:19

标签: javascript php html css hyperlink

如何使用链接在输入框之间导航?因此,如果我点击链接,它将专注于特定的输入框。解决方案可以使用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'>

P.S:我也可以使用jQuery

4 个答案:

答案 0 :(得分:4)

使用此:

<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/

答案 1 :(得分:1)

您可以使用<label>

如果你想在jQuery中完成。

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

答案 2 :(得分:0)

您可以为此目的使用标签:

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

Fiddle

答案 3 :(得分:0)

试试这个,

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

Working Demo