JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

JavaScript控制输入框中只能输入中文、数字和英文是一个常见的需求。实现这个功能可以使用JavaScript的正则表达式来进行匹配和限制。下面是实现该功能的完整攻略：

1. 添加输入框

首先在HTML中添加一个需要控制输入的input输入框，如下：

<label for="input-text">输入框：</label>
<input type="text" id="input-text" name="input-text">

2. 给输入框添加oninput事件

接下来，我们需要给输入框添加oninput事件，当输入框内容发生变化时，将会触发该事件，如下：

<label for="input-text">输入框：</label>
<input type="text" id="input-text" name="input-text" oninput="checkInput()">

3. 编写JS函数检查输入内容

我们需要编写一个JS函数来检查输入框中的内容是否符合要求。在这个函数中，我们先获取输入框元素，然后通过正则表达式验证输入内容。如果输入内容不符合要求，则将其替换为空字符串。

function checkInput() {
  var inputElem = document.getElementById("input-text");
  var inputValue = inputElem.value;

  var regExp = /[^a-zA-Z0-9\u4e00-\u9fa5]/g;
  var result = inputValue.replace(regExp, "");

  inputElem.value = result;
}

在上述代码中，我们定义了一个正则表达式，其中^表示否定字符集，\u4e00-\u9fa5表示中文字符集，g表示全局匹配。该正则表达式会匹配所有不是中文、数字和英文的字符。

然后，我们使用字符串的replace()方法来将不符合要求的字符替换为空字符串。最后，将替换后的内容赋值给输入框的value属性，以更新输入内容。

4. 示例

下面提供两个示例，以说明上述实现方法的使用效果。

示例1

当输入框中输入以下内容时：

hello, world! 你好吗？

会在控制台输出以下内容：

hello world 你好吗

示例2