如何使用链接在输入框之间导航?因此,如果我点击链接,它将集中在一个特定的输入框上。该解决方案可以使用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
使用此:
<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();
});
});
Demo2:http://jsfiddle.net/jogesh_pi/zNqtB/
您可以为此使用<label>
。
如果你想在jQuery中完成。
$( ".link" ).click(function() {
$('#input1').get(0).focus();
});
您可以为此目的使用标签:
<label for="input1"> input1 label </label>
<input type="text" id="input1">
Fiddle
试试这个,
$( ".link" ).click(function() {
$(this).next('input[type="text"]').focus();
});
工作演示