Question

我知道通常标签通过ID与输入元素相关联，如下所示：

<label for="myElement">Element</label>
<input type="text" name="myElement" id="myElement" />

但是，我需要仅通过名称将标签与输入相关联：

<label for="myElement">Element</label>
<input type="text" name="myElement" />

我想确保屏幕阅读器将标签与输入相关联，方便用户单击标签并将光标放在输入中。

这是用jquery最好的方法吗？如果是这样，那个函数会是什么样的？

Answer 1

补充@ Mohamed-Yousef回答：

您可以使用aria-labelledby attribute，因此屏幕阅读器知道标签是针对给定输入的。

看起来像这样：

＆＃13;

<label id="testLabel">Element</label>
<input type="text" name="myElement" aria-labelledby="testLabel" />

＆＃13;

Answer 2

我知道你已经接受了答案，上面还有其他答案。但有两点：

这里没有任何内容需要或保证jQuery解决方案，
我假设您不能毫不客气地添加id值（例如您的<label>）。

因此，此选项是有效的HTML，不依赖于ARIA，不依赖于脚本，不需要您生成唯一的id值，不需要您向现有值添加任何新属性元素，仍然为您提供一个可访问的名称，并仍然保持更大的点击/命中区域：

<label>Element
  <input type="text" name="myElement">
</label>

使用标签文本包装<label>元素中的字段可为您提供所需的支持，而无需对其进行过度设计。

[已编辑删除for属性，因为我是一个过快的人...

Answer 3

我想赞美上述两个答案，因为它们非常好。老实说，我可能会使用他们中的一个或两者兼而有之。

尽管如此，我确实有一个问题，是否可以更改动态ID（从DB中拉出的动态ID作为元素包装器）？您是否可以在输入字段中使用自动聚焦属性？例如，

＆＃13;

<label for="myElement">Element</label>
<span id="myElementWrap">
  <input type="text" name="myElement" id="myElement" autofocus />
</span>

＆＃13;

Answer 4

编辑：您的问题在您的一条评论中更精确地定义

使用自定义模板呈现引擎从数据库动态加载表单元素。目前使用元素ID（从DB中提取）作为输入周围的包装div。我更倾向于坚持每页唯一ID，而不是在表单输入上重复它。

对于要解决的问题，您只需要在内部“id”前缀

 <div id="2012"> <-- wrapper
    <label for="input-2012">Custom label</label>
    <input id="input-2012" name="input-2012" />
 </div>

当前接受的答案仅适用于使用ARIA的设备，而不适用于标准用户。您还可以使用PHP uniqid()之类的函数通过页面生成唯一ID

原始答案如下：

屏幕阅读器需要id才能将标签与字段相关联。之前接受的答案对屏幕阅读器用户没有帮助。

正如您可以使用jQuery一样，使用它在页面加载时动态创建id属性。

$(document).ready(function() {
  $("label[for]").each(function() {
    var forVar=$(this).attr('for'); 
    if (!$("#"+forVar).length) {
          $("input[name='"+forVar+"']").attr("id", forVar);
    }
  })
});

如果您确实要求不同的id属性与name属性不匹配（例如，如果您在同一网页中为不同的表单重复使用相同的name属性），则可以动态生成一个id：

$(document).ready(function() {
  var cnt=0;
  $("label[for]").each(function() {
    var forVar=$(this).attr('for'); 
        if (!$("#"+forVar).length) {
        var id='ele-'+cnt++;
        $(this).attr('for', id);
        $("input[name='"+forVar+"']").attr("id", id);
    }
  })
});

Answer 5

有两种方法可以做到这一点

使用$(this).next('input').focus();

1st：

$('label').on('click',function(){
    $(this).next('input').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myElement">Element</label>
<input type="text" name="myElement" />

第二名： name attribute这样

$('label').on('click',function(){
    var getName = $(this).attr('for');
    $('input[name='+getName+']').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="myElement">Element</label>
<input type="text" name="myElement" />

HTML：按名称属性将标签链接到输入

5 个答案: