Question

我有很多带有标签的字段 - 如下所示：

<div class="control-group">
    <label class="control-label" for="some-id-1"><a href="http://example.com/some-id-1" target="_blank">Text1</a></label>
    <div class="controls">
        <input type="text" id="some-id-1" name="some-id-1"><br>
    </div>
</div>
<div class="control-group">
    <label class="control-label" for="some-id-2"><a href="http://example.com/some-id-2" target="_blank">Text2</a></label>
    <div class="controls">
        <input type="text" id="some-id-2" name="some-id-2"><br>
    </div>
</div>

如果用户点击链接，我如何根据字段进行聚焦（不阻止默认操作）？即如果用户点击了Text1，那么我应该在新窗口中打开http://example.com/some-id-1并将焦点设置为ID为some-id-1的输入。

Answer 1

jsfiddle

$(".control-label a").click(function(){
   $(this).parent().next().find('input').focus();

});

Answer 2

$('.control-label a').on('click', function(e) {
  e.preventDefault();
  $(this).parent().next().find('input').focus();
  // or
  $('.control-group').has(this).find('input').focus();
});

Answer 3

<a href="http://example.com/some-id-1" target="_blank" onClick="document.getElementById('some-id-1').focus();">Text1</a>

Answer 4

如果理解正确，您想要打开一个新页面，并在新页面中根据点击的链接设置焦点

如果要打开新页面，则需要在url中传递哈希值或使用cookie并让其他页面解析哈希值或cookie

在当前页面中：

$(function(){
    $('.control-label a').click(function(){
       var hash='#'+ $(this).next().find('input').attr('id');
       window.open( this.href + hash);
        return false;
    });
})

在其他页面中：

$(function(){
    var hash= location.hash;
    $(hash).focus();
})

Answer 5

一个页面中的JavaScript无法控制其他网页如何响应网址，如果“其他”网页在您的控制之下，那么您可以将其设置为解析id：

var parts = document.location.href.split('/'),
    id = parts.pop();

document.getElementById(id).focus;

另一方面，如果您想要可靠地关注该元素，只需将id作为hash传递给网址：

<a href="somepage.html#some-id">Go to an element of 'some id'</a>

这可能无法对表单元素进行聚焦，但它应该引起用户注意该元素，并且在控件之外的页面中更加可靠。

如果用户点击链接，如何关注下一个字段？

5 个答案: