使用ENTER键切换输入的INPUT

1.(简答题)创建一个前端JAVASCRIPT程序，可以在输入时对表单进行验证(包括验证是否为空，是否为数字)，并使用ENTER键
切换输入的INPUT，然后在表中使用ONSUBMIT控制提交
OO

参考GPT和自己的思路：好的，针对您的问题，我可以给出以下的答复和建议：

关于前端 JavaScript 程序的编写和表单验证：

在前端编写 JavaScript 程序时，您可以使用一些 DOM API 和事件监听器来完成表单验证和输入控制的功能。例如，可以使用 document.querySelector() 方法获取需要验证的 input 元素，然后通过 addEventListener() 方法监听其 input 事件，并在事件处理函数中进行验证和控制。具体的实现可以参考以下代码：

var inputElement = document.querySelector('input');
inputElement.addEventListener('input', function() {
  var value = inputElement.value;
  if (!value) {
    alert('请输入内容！');
  } else if (isNaN(value)) {
    alert('请输入数字！');
  } else {
    // 输入合法，切换到下一个 input 元素
    inputElement.blur(); // 先失焦
    var nextInput = inputElement.nextElementSibling;
    if (nextInput) {
      nextInput.focus();
    }
  }
});

上述代码中，我们首先通过 querySelector() 方法获取了一个需要验证的 input 元素，然后通过 addEventListener() 方法监听其 input 事件。在事件处理函数中，我们首先判断输入值是否为空或不是数字，如果是，则弹出提示信息；否则，我们先通过 blur() 方法使当前 input 元素失焦，然后获取下一个 input 元素并将其 focus()，以切换输入焦点。

关于使用 ENTER 键切换输入的问题：

在上述代码中，我们已经完成了切换输入焦点的逻辑，只需要在 input 元素的 keydown 事件中监听 ENTER 键的按下即可：

inputElement.addEventListener('keydown', function(event) {
  if (event.keyCode === 13) {
    event.preventDefault(); // 防止默认的提交行为
    var value = inputElement.value;
    if (!value) {
      alert('请输入内容！');
    } else if (isNaN(value)) {
      alert('请输入数字！');
    } else {
      // 输入合法，切换到下一个 input 元素
      inputElement.blur(); // 先失焦
      var nextInput = inputElement.nextElementSibling;
      if (nextInput) {
        nextInput.focus();
      }
    }
  }
});

上述代码中，我们在 keydown 事件中判断是否按下了 ENTER 键（keyCode 为 13），如果是，则阻止默认的提交行为，并调用前面提到的验证和控制逻辑，完成切换输入的功能。

关于表单的提交控制：

最后，关于表单的提交控制，我们可以使用 onsubmit 事件来监听表单的提交行为，并在事件处理函数中完成更复杂的验证和控制逻辑。例如，可以在表单提交前检查所有 input 元素的值是否合法，如果存在不合法的值，则阻止表单的提交，并弹出提示信息。具体的实现可以参考以下代码：

var formElement = document.querySelector('form');
formElement.addEventListener('submit', function(event) {
  var inputElements = this.querySelectorAll('input');
  for (var i = 0; i < inputElements.length; i++) {
    var value = inputElements[i].value;
    if (!value) {
      alert('请输入内容！');
      inputElements[i].focus();
      event.preventDefault(); // 阻止表单的提交
      return;
    } else if (isNaN(value)) {
      alert('请输入数字！');
      inputElements[i].focus();
      event.preventDefault(); // 阻止表单的提交
      return;
    }
  }
  // 提交表单
});

上述代码中，我们首先通过 querySelector() 方法获取需要监听的 form 元素，并在其上监听 submit 事件。在事件处理函数中，我们通过 querySelectorAll() 方法获取所有需要验证的 input 元素，并在循环中逐个检查其值是否合法。如果存在不合法的值，则弹出提示信息并阻止表单的提交；否则，我们继续提交表单（因为 return 语句已经退出了函数，所以这里没有具体的提交代码）。

希望以上解答和建议能够满足您的需求，同时也能为其他读者提供一些参考。如果您有其他问题或需要更详细的解答，欢迎继续追问。



```javascript
<!DOCTYPE html>
<html>
<head>
  <title>Form Validation</title>
  <script>
    function validateForm() {
      var x = document.forms["myForm"]["num"].value;
      if (x == "") {
        alert("Number must be filled out");
        return false;
      }
      if (isNaN(x)) {
        alert("Number must be a number");
        return false;
      }
      return true;
    }

    function nextInput(e) {
      var inputs = document.forms["myForm"].getElementsByTagName("input");
      var currentIndex = Array.prototype.indexOf.call(inputs, e.target);
      if (currentIndex === inputs.length - 1) {
        inputs[0].focus();
      } else {
        inputs[currentIndex + 1].focus();
      }
    }
  </script>
</head>
<body>
  <form name="myForm" onsubmit="return validateForm()">
    Number:
    <input type="text" name="num" onkeypress="if(event.keyCode === 13) {nextInput(event);}">
    <br><br>
    Text:
    <input type="text" name="text" onkeypress="if(event.keyCode === 13) {nextInput(event);}">
    <br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

```

使用ENTER键 切换输入的INPUT

使用ENTER键切换输入的INPUT