为什么交互式外壳程序的子外壳程序作为交互式外壳程序运行？

Question

在我的Bash会话中，我运行以下命令：

document.querySelector('.grade').addEventListener('keydown', function (e) {
  const char = e.key;
  let newValue = e.target.value;
  if (char.length > 1) {
    return true;
  } else {
    newValue += char;
  }
  const perfectRegex = /^([fF]{1}|\d{1}\.\d{1,2}|10\.00?)$/;
  const allNumbersRe = /^(\d{1})(\d{1,2})$/;
  const numbersAndDecRe = /^[\d\.]{1,4}$/;
  if (!perfectRegex.test(newValue) && 
    !allNumbersRe.test(newValue) && 
    !numbersAndDecRe.test(newValue) && 
    newValue.length > 0) {
    e.preventDefault();
  }
});
document.querySelector('.grade').addEventListener('blur', function (e) {
  const tenRe = /^100$/;
  const allNumbersRe = /^(\d{1})(\d{1,2})$/;
  const newValue = e.target.value;
  e.target.setCustomValidity("");
  if (tenRe.test(newValue)) {
    e.target.value = "10.0";
  } else if (allNumbersRe.test(newValue)) {
    e.target.value = newValue.replace(allNumbersRe, "$1.$2");
  } 
  if (parseFloat(e.target.value) > 10.0) {
    e.target.setCustomValidity("The value cannot be more than 10.0");
    e.preventDefault();
  }
});

我明白了

input:invalid { border-color: red; }

因此，我的子shell作为交互式shell运行。

如果我尝试在后台运行相同的命令

<input type="text" class="grade" maxlength="4">

我得到相同的输出。为什么子Shell会作为交互式Shell运行？