如何防止或检测输入字段中的从右到左（RTL）文本输入？

一、检测RTL文本输入 #

通过正则匹配Unicode中RTL语言（阿拉伯语、希伯来语等）的字符范围，可在输入过程中实时检测：

const inputField = document.getElementById('target-input');

inputField.addEventListener('input', function() {
  // 覆盖常见RTL语言的Unicode字符区间
  const rtlCharRegex = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
  if (rtlCharRegex.test(this.value)) {
    console.log("检测到RTL文本输入");
    // 可添加前端提示，比如：
    // this.setCustomValidity("禁止输入从右到左的文本");
    // this.reportValidity();
  } else {
    // 清除验证提示
    // this.setCustomValidity("");
  }
});

二、防止RTL文本输入 #

如果需要直接拦截RTL字符输入，可通过两种方式实现：

方法1：按键事件实时拦截 #

针对键盘输入的RTL字符直接阻止：

const inputField = document.getElementById('target-input');

inputField.addEventListener('keydown', function(e) {
  const rtlCharRegex = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
  if (rtlCharRegex.test(e.key)) {
    e.preventDefault();
    alert("不允许输入从右到左的文本");
  }
});

方法2：过滤已输入内容 #

处理粘贴、输入法输入等非键盘直接输入的场景：

const inputField = document.getElementById('target-input');

inputField.addEventListener('input', function() {
  const rtlCharRegex = /[\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/g;
  if (rtlCharRegex.test(this.value)) {
    // 移除所有RTL字符
    this.value = this.value.replace(rtlCharRegex, '');
    alert("已自动移除从右到左的文本");
  }
});

补充：HTML5原生验证辅助 #

可结合pattern属性做初步的表单验证，配合JavaScript实时处理提升体验：

<input type="text" id="target-input" pattern="^[^\u0590-\u05FF\u0600-\u06FF\u0700-\u074F\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]*$" title="禁止输入从右到左的文本">

内容的提问来源于stack exchange，提问作者Glenn