javascript - onchange 不适用于按类名选择的输入字段

Question

当我按类名选择输入字段元素时，onchange 事件不起作用。我想更改当前更改的输入字段的值。代码如下：

// change current input field
function upperCase() {
// change current change input field
  let x = document.getElementsByClassName('fname');
  x.value = x.value.toUpperCase();
}   
// call function when current element change
document.getElementsByClassName('fname').onChange = upperCase;

<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">

拜托，我还想更改当前更改输入字段的值。

标签： javascript

Answer 1

document.getElementsByClassName返回元素的集合，但您正试图像访问单个元素一样访问该值。

您需要访问每个单独的元素，如下所示：

let inputs = document.getElementsByClassName('fname');
inputs[0].value = inputs[0].value.toUpperCase();

甚至更好的是循环它们：

let inputs = document.getElementsByClassName('fname');
for (let i of inputs) {
  i.value = i.value.toUpperCase();
}

---

编辑以添加事件它应该是相同的想法：

function upperCase() {
  // change current change input field
  let inputs = document.getElementsByClassName('fname');
  for (let i of inputs) {
    i.value = i.value.toUpperCase();
  }
}
let inputs = document.getElementsByClassName('fname');
for (let i of inputs) {
  i.addEventListener('change', upperCase);
}

<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">
<input type="text" class="fname">