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

问题描述：

How can I use a link to navigate between input boxes? So if I click the link it will focus on a specific input box. The solution can be with PHP, CSS, JavaScript or HTML.

So:

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

Will navigate to/focus on

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

And

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

Will navigate to/focus on

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

P.S: I may also use jQuery

如何使用链接在输入框之间导航？因此，如果我点击链接，它将专注于特定的输入框。解决方案可以使用PHP，CSS，JavaScript或HTML。 p>

所以： p>

 ＆lt; a href ='link1'class =  'link'＆gt; 
  code>  pre> 
 
 将导航到/关注 p> 
 
 
 ＆lt; input type ='text'  id ='input1'class ='input'＆gt; 
  code>  pre> 
 
   p> 
 
 
 ＆lt; a href ='  link2'class ='link'＆gt; 
  code>  pre> 
 
 将导航到/焦点 p> 
 
 
 ＆lt;输入类型 ='text'id ='input2'class ='input'＆gt; 
  code>  pre> 
 
  PS：我也可以使用jQuery  p> 
  div>

答

Use this:

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

Define the onclick event for every link, with the input box id, according to example

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

Alternative - with JQuery:

If you have link and input with the same classes and id like this :

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

then use JQuery:

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

Demo2: http://jsfiddle.net/jogesh_pi/zNqtB/

答

You can use label for this purpose:

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

Fiddle

答

You can use <label> for this.

If you want to be done in jQuery.

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

答

Try this,

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

Working Demo

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

Alternative - with JQuery:

相关推荐