IOS emdash删除前一个字符

Question

我有一个文本文件，它只允许使用字母和数字。但是，当 ios 用户通过双击破折号“ - ”插入破折号时，它将删除它之前的任何字符。这只发生在 ios 设备上

我正在使用正则表达式来立即过滤输入。这是我的代码：

let text = event.target.value;
let regref = new RegExp(/[^a-zA-Z0-9]/g);
text  = text.replace(/[^a-zA-Z0-9\s\-\—]/g,"");
let str = event.target.value;


let text = event.target.value;
let regref = new RegExp(/[^a-zA-Z0-9]/g);
text  = text.replace(/[^a-zA-Z0-9\s\-\—]/g,"");
let str = event.target.value;


if (str.length > 6) { 
  event.preventDefault();
  return;
}
setTimeout(function(){
  if (!regref.test(text)) {
    event.preventDefault();
  }
  text = text.replace('_', "");

  text = text.replace('-',"");
}, 200);
setReferralCode((referralCode = caps));

notice in text = text.replace(/[^a-zA-Z0-9\s-\—]/g,"");我已经允许 - 和 - 希望我可以显示错误消息而不是阻止其输入，但是即使如果输入：“aaabbb”后跟双破折号字符串更改为“aaabb-”

   **FIXED UPDATE**

一位同事通过使用 _.debounce(); 帮助我解决了这个问题。 并且有一个临时变量来存储以前的有效代码。 它看起来像这样：

 let text = event.target.value as string;
console.log(text);
var emRegExp = new RegExp(/[–—\s\.]/g);
if (text[text.length - 1] == "-" || emRegExp.test(text[text.length - 1])) {
  text = lastReferralCode
    .replace(/[^a-zA-Z0-9]/g, "")
    .replace(/\s/g, "")
    .toUpperCase()
    .trim()
    .substr(0, 6);
} else {
  text = text
    .replace(/[^a-zA-Z0-9]/g, "")
    .replace(/\s/g, "")
    .toUpperCase()
    .trim()
    .substr(0, 6);
  setIsDashBefore(false);
}

我想分享这个，以防将来有人遇到同样的问题。这对于一些基于 Web 的超级应用程序来说可能很麻烦。如果使用某些 android 键盘输入双“空格”，Android 设备将删除前一个字符。而 iPhone 的双“-”字符也是如此。 正如@A Haworth 提到的那样，ios 或 android 正在处理导致问题的双重字符。

Answer 1

看起来您的代码有可能遇到计时问题 - 系统正在处理破折号，同时代码正在尝试处理它。

IOS 接收'-' 字符的活动是查看输入中的前一个字符是否也是'-'。如果是，则将两者转换为单个字符空间。到那时，尽管任何事件监听代码都看到了两个连字符。

如果我们“干扰”并从字符串中删除第一个连字符 IOS 是“混淆”并删除它认为是两个“-”字符，这意味着它会删除输入值字符串中的下一个字符。

为了解决这个问题，我们可以查找连字符而不是立即将其从输入值中删除。

这里是一个sn-p，把正在查看的事件作为keyup事件：

const input = document.querySelector('input');
let timing = false; //set to true if we have a timeout set
let lastChWasHyphen = false; //set to true on every odd numbered hyphen

function keyup(event) {
  
  if ( event.key == '-' ) { 
    if (!lastChWasHyphen) { alert('You cannot have a - character'); }
    lastChWasHyphen = !lastChWasHyphen;
  }
  else { lastChWasHyphen = false; }
 
  if (!lastChWasHyphen) { input.value  = input.value.replace(/[^a-zA-Z0-9]/g,""); }
}

input.addEventListener('keyup',keyup);

<input />

缺点：在键入另一个字符之前，连字符不会被删除。例如，在此设置超时是不安全的，因为用户可以键入连字符两次并留有间隙以在 IOS 上获得 emspace。在这里唯一要做的就是按照问题中的建议在奇数字符上发出警告消息。

警告：这个问题是关于 IOS 允许输入 emspace 的。我不知道 IOS 或任何其他系统是否有其他特殊的双字符映射到单字符方法。

Answer 2

一位同事通过使用 _.debounce(); 帮助我解决了这个问题。 并且有一个临时变量来存储以前的有效代码。 它看起来像这样：

 let text = event.target.value as string;
console.log(text);
var emRegExp = new RegExp(/[–—\s\.]/g);
if (text[text.length - 1] == "-" || emRegExp.test(text[text.length - 1])) {
  text = lastReferralCode
    .replace(/[^a-zA-Z0-9]/g, "")
    .replace(/\s/g, "")
    .toUpperCase()
    .trim()
    .substr(0, 6);
} else {
  text = text
    .replace(/[^a-zA-Z0-9]/g, "")
    .replace(/\s/g, "")
    .toUpperCase()
    .trim()
    .substr(0, 6);
  setIsDashBefore(false);
}

我想分享这个，以防将来有人遇到同样的问题。这对于一些基于 Web 的超级应用程序来说可能很麻烦。如果使用某些 android 键盘输入双“空格”，Android 设备将删除前一个字符。而 iPhone 的双“-”字符也是如此。 正如@A Haworth 提到的那样，ios 或 android 正在处理导致问题的双重字符。