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

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

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

相关推荐
携欢2 分钟前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss
三小河10 分钟前
工作中的Ai工具汇总
前端
mapbar_front28 分钟前
react项目开发—关于代码架构/规范探讨
前端·react.js
二木一夕35 分钟前
Vue 3 的组合式 API和传统选项式 API区别(vue2转vue3,两者差异)
前端
LuckySusu37 分钟前
【vue篇】Vue 项目中的静态资源管理:assets vs static 终极指南
前端·vue.js
LuckySusu37 分钟前
【vue篇】Vue.delete vs delete:数组删除的“陷阱”与正确姿势
前端·vue.js
LuckySusu39 分钟前
【vue篇】Vue 模板编译原理:从 Template 到 DOM 的翻译官
前端·vue.js
小菜摸鱼41 分钟前
Node.js + vue3 大文件-切片上传全流程(视频文件)
前端·node.js
LuckySusu1 小时前
【vue篇】Vue 2 响应式“盲区”破解:如何监听对象/数组属性变化
前端·vue.js
LuckySusu1 小时前
【vue篇】Vue Mixin:可复用功能的“乐高积木”
前端·vue.js