JavaScript 对不同的 id 使用相同的函数

Question

我有一个包含多个日期字段的表单。这些日期字段是实际的文本字段，因为我想从一开始就控制日期结构。

<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('eindDatum'); ?>
  <label for="eindDatum"><?php echo $this->lang->line('eindDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="eindDatum" id="eindDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">
</div>
<div class="form-group col-md-6 col-xs-13">
  <?php echo form_error('aanvangDatum'); ?>
  <label for="aanvangDatum"><?php echo $this->lang->line('aanvangDatum'); ?><small class="text-info"><?php echo ' ' . $this->lang->line('datumNotatie'); ?></small></label>
  <input type="text" name="aanvangDatum" id="aanvangDatum" class="form-control date" placeholder="DD-MM-YYYY" required pattern="(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-[0-9]{4}">

</div>

我在网上寻找一个格式化程序来自动在结构之间插入 - （破折号）。但是我对 JavaScript 的了解真的很有限。我尝试使用类选择器，但这似乎根本不起作用。

var date = document.getElementsByClassName('date');

然后我在输入文本字段中添加了一类日期

我（正在尝试）使用这个https://codepen.io/tutsplus/pen/KMWqRr

任何帮助将不胜感激。如果可能的话，请告诉我您为什么以特定方式处理它，以便我可以从您的经验中学习。

Answer 1

在您分享的链接中，他们是 applying 的函数到单个 element，因为他们是通过 id 获取的。

在您的情况下，您尝试通过其class 获取它，在这种情况下它将不起作用，因为date 变量将包含elements 的collection，因此您需要遍历此集合以将事件侦听器正确添加到每个element。

您的代码应如下所示：

var dates = document.getElementsByClassName('date');

Array.from(dates).forEach(function(element) {
  element.addEventListener('input', inputFunction);
  element.addEventListener('blur', blurFunction);
});

注意：

我为events创建了两个函数，您只需将代码分别放在链接中的事件监听器中，分别放在这两个函数中：

function inputFunction(e) {
   //The input event code will be here
   ...
}

function blurFunction(e) {
   //The blur event code will be here
   ...
}