Question

我有一些关联在一起的输入字段，需要复制来自＆＃34; parent＆＃34;的值。领域＆＃34;孩子＆＃34;输入某些内容时的字段＆＃34; parent＆＃34;领域。简而言之，它应该像jsfiddle一样工作。

<form id="form1" method="..." action="...">
    <p><label>Enter something: <input name="parent1"></label><br>
    <label>and see what happens: <input name="child1"></label></p>
</form>
<script>
var form = document.getElementById('form1');
form.elements.parent1.onblur = function () {
    var form = this.form;
    form.elements.child1.value = form.elements.parent1.value;
};
</script>

简单。现在问题在于：我不知道表单将包含多少个字段（这些字段是动态创建的）。我所知道的总是会有相同数量的父/子字段，它们的名字也是一样的。形式可能如下：

<input name="parent[59]"> <input name="child[59]">
<input name="parent[87]"> <input name="child[87]">

......等等。是的，字段名称是相同的，除了数字（因为这些需要作为数组提交）将是不同的。

如何重写JS代码，因此当用户在parent[59]中输入内容时，其值将被复制到child[59]，当用户在parent[87]中输入内容时，其值将被复制到child[87] {1}}等等？

当输入字段的名称包含方括号jsfiddle时，我甚至无法使用单个字段

（是的，我尝试用\转义括号，但没有运气）

Answer 1

您可以根据属性定位所有元素，然后从名称

中获取数字

document.querySelectorAll('[name^=parent]').forEach(function(elem) {
  elem.addEventListener('input', function() {
    var n = this.name.split('[').pop();
    document.querySelector('[name="child[' + n + '"]').value = this.value;
  });
});

<input name="parent[59]"> <input name="child[59]">
<br /><br />
<input name="parent[87]"> <input name="child[87]">
<br /><br />
<input name="parent[187]"> <input name="child[187]">
<br /><br />
<input name="parent[3]"> <input name="child[3]">

Answer 2

一个非常简单的解决方案是使用an Event Delegate来侦听DOM上的所有输入事件，然后如果目标（即event.target）元素具有 name 属性，其中包含字符串文字“ parent ”（使用String.indexOf()检查），将其替换为“ child ”（使用{{3} }）并使用该name属性更新元素。

document.addEventListener('input', function(inputEvent) {
  if (inputEvent.target.name.indexOf('parent') > -1) {
    var childName = inputEvent.target.name.replace('parent', 'child');
    document.forms[0].elements[childName].value = inputEvent.target.value;
  }
});

<form id="form1">
  <input name="parent[59]"> <input name="child[59]">
  <br /><br />
  <input name="parent[87]"> <input name="child[87]">
  <br /><br />
  <input name="parent[187]"> <input name="child[187]">
  <br /><br />
  <input name="parent[3]"> <input name="child[3]">
</form>

将其与非委托方法（向所有父输入添加事件侦听器，需要在String.replace()中迭代包含 parent 的类名称的DOM元素）进行比较。当我运行它时，非委托案例的速度慢了33％。

通过this jsperf testcase的镜头比较两种方法，委托方法是恒定时间算法，因此它是Θ（1）^{algorithmic complexity}，而非委托方法是线性，或Θ（n）¹。换句话说，事件委托方法的最坏情况是每个页面加载运行一次，而另一个方法将lambda函数运行多次，因为name属性中有字符串文字“parent”的元素。

¹ <子> 1

Javascript - 在不知道所有字段的情况下复制字段值

2 个答案: