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

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

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属性。

相关推荐
北'辰32 分钟前
DeepSeek智能考试系统智能体
前端·后端·架构·开源·github·deepseek
前端历劫之路1 小时前
🔥 1.30 分!我的 JS 库 Mettle.js 杀入全球性能榜,紧追 Vue
前端·javascript·vue.js
爱敲代码的小旗2 小时前
Webpack 5 高性能配置方案
前端·webpack·node.js
Murray的菜鸟笔记2 小时前
【Vue Router】路由模式、懒加载、守卫、权限、缓存
前端·vue router
苏格拉没有底了3 小时前
由频繁创建3D火焰造成的内存泄漏问题
前端
阿彬爱学习3 小时前
大模型在垂直场景的创新应用:搜索、推荐、营销与客服新玩法
前端·javascript·easyui
橙序员小站3 小时前
通过trae开发你的第一个Chrome扩展插件
前端·javascript·后端
Lazy_zheng3 小时前
一文掌握:JavaScript 数组常用方法的手写实现
前端·javascript·面试
是晓晓吖3 小时前
关于Chrome Extension option的一些小事
前端·chrome
MrSkye3 小时前
🔥从菜鸟到高手:彻底搞懂 JavaScript 事件循环只需这一篇(下)
前端·javascript·面试