Question

我经常在网站上创建某种形式，并且我有＆lt; label＆gt;和＆lt;输入＆gt;应该连在一起。

执行此操作的标准方法是设置＆＃39; for＆＃39; ＆lt; label＆gt;上的属性匹配＆lt; input＆gt;

上的＆id; id属性

<label for="city-input">City</label>
<input id="city-input" type="text" />

这当然依赖于为每个＆lt; input＆gt;提供唯一的ID。页面上的元素。

我经常发现自己处于必须动态创建表单并且页面其余部分的确切内容未知或不受我控制的情况。所以我不能只指定一个像城市输入一样的内容＆＃39;如果它与页面上的其他内容发生冲突。我最终创建了随机字符串用作id：

var label = document.createElement('label');
label.innerHTML = 'City';
var input = document.createElement('input');
input.type = 'text';
// create a random string as the id
var id = Math.random().toString(36).substring(2);
input.id = id;
label.htmlFor = id;

这种方法有效，但我讨厌它。我有我的HTMLInputElement实例和我的HTMLLabelElement实例。我想把它们联系在一起。但我必须毫无意义地创建一个随机字符串来用作中介。然后当有人点击＆lt; label＆gt;浏览器必须毫无意义地查找字符串id以找到＆lt; input＆gt;元件。它太不优雅了。

有没有办法直接将HTMLLabelElement与HTMLInputElement相关联？还是其他一些更好的方法？

（我知道您可以通过将＆lt; input＆gt;放在＆lt; label＆gt;内来避免使用id，但这通常不可能，因为页面的样式或其他各种原因。）

Answer 1

您可以通过使用递增计数器作为表单元素的唯一ID来避免随机数。我创建了一个codepen here，每次单击刷新按钮时都会显示一个随机数量的表单元素。每个元素都有自己的标签和输入，两者都通过生成唯一的递增ID进行链接。所有这些都可以单独引用。单击标签将自动突出显示链接的表单输入。

为了清楚起见，我使用了以下格式作为链接ID：

  var id="_" + counter +"_"+i;
  var labelId = "labelForCity_" + counter +"_"+i;
  var inputId = "city_" + counter +"_"+i;

然后标签通过

链接到输入

label.htmlFor = inputId;

每次单击刷新按钮（模拟添加到表单的动态数量的附加字段）时，计数器变量将递增，这将在id中使用。 id显示在输入字段旁边的括号中。

Answer 2

如果您的标签和输入始终并排（它们应该是），那么您可以编写一种方法，在您单击标签时为下一个输入提供焦点。示例代码，您可以根据需要进行修改：

HTML -

<label>something</label>
<input />

Javascript -

var a = document.getElementsByTagName('label')[0];
a.addEventListener('click', function(e){
 e.target.nextElementSibling.focus();
});

您可以以编程方式将标签链接到没有字符串ID的表单输入吗？

2 个答案: