如何设置输入框输入值不是中文和空格

方法一:使用正则表达式验证输入值是否合法。

javascript 复制代码
<input type="text" id="myInput">

<script>
  const input = document.getElementById("myInput");
  
  input.addEventListener("input", function() {
    const value = this.value;
    const regex = /^[一-龥\s]+$/; // 匹配中文和空格的正则表达式
    
    if (!regex.test(value)) {
      this.value = value.replace(/[^一-龥\s]+/g, ""); // 将非中文和空格的字符替换为空
    }
  });
</script>

方法二:使用input事件和ASCII码验证输入值是否合法。

javascript 复制代码
var input = document.getElementById("myInput");
input.addEventListener("input", function() {
  var value = this.value;
  var newValue = '';
  for (var i = 0; i < value.length; i++) {
    var asciiCode = value.charCodeAt(i);
    if ((asciiCode >= 0 && asciiCode <= 64) || (asciiCode >= 91 && asciiCode <= 96) || (asciiCode >= 123 && asciiCode <= 127)) {
      continue; // 排除掉ASCII码表中不符合条件的字符
    } else {
      newValue += value.charAt(i);
    }
  }
  this.value = newValue;
});

上述代码中,我们使用for循环遍历输入的值中的每一个字符,并使用charCodeAt()方法获取每个字符的ASCII码。然后,我们根据ASCII码表中不符合要求的字符的范围来排除掉这些字符,只保留符合条件的字符。最后,我们使用一个新的字符串变量newValue来保存符合条件的字符,并将其赋值给输入框的value属性。

相关推荐
UIUV35 分钟前
模块化CSS学习笔记:从作用域问题到实战解决方案
前端·javascript·react.js
aoi36 分钟前
解决 Vue 2 大数据量表单首次交互卡顿 10s 的性能问题
前端·vue.js
Kakarotto36 分钟前
使用ThreeJS绘制东方明珠塔模型
前端·javascript·vue.js
donecoding38 分钟前
TypeScript `satisfies` 的核心价值:两个例子讲清楚
前端·javascript
德育处主任38 分钟前
『NAS』在群晖部署一个文件加密工具-hat.sh
前端·算法·docker
cup11340 分钟前
【原生 JS】支持加密的浏览器端 BYOK AI SDK,助力 Vibe Coding
前端
用户120391129472643 分钟前
使用 Tailwind CSS 构建现代登录页面:从 Vite 配置到 React 交互细节
前端·javascript·react.js
杨进军43 分钟前
模拟 Taro 实现编译多端样式文件
前端·taro
阿珊和她的猫1 小时前
React Hooks:革新组件开发的优势与实践
前端·react.js·状态模式
全栈技术负责人1 小时前
AI时代前端工程师的转型之路
前端·人工智能