添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
相关文章推荐
飘逸的汽水  ·  Kindle在线推书网站 ...·  2 周前    · 

textarea禁止输入表情和空格,兼容ios

要禁止 textarea 输入表情和空格,并且在 iOS 设备上保持兼容性,可以使用 JavaScript 监听 input keydown 事件,然后过滤输入内容。

下面是一个示例代码,可以禁止输入表情符号和空格:

<textarea id="myTextarea"></textarea>
const textarea = document.getElementById('myTextarea');
const regExp = /[\uD800-\uDBFF][\uDC00-\uDFFF]|\s/g; // 匹配表情符号和空格
textarea.addEventListener('input', function(e) {
  const inputText = e.target.value;
  const filteredText = inputText.replace(regExp, ''); // 过滤表情符号和空格
  e.target.value = filteredText;
textarea.addEventListener('keydown', function(e) {
  const key = e.keyCode || e.charCode || 0;
  const isSpace = key === 32;
  const isEmoji = /\p{Emoji}/gu.test(String.fromCharCode(key));
  if (isSpace || isEmoji) {
    e.preventDefault(); // 禁止输入空格和表情符号

以上代码中,使用正则表达式 [\uD800-\uDBFF][\uDC00-\uDFFF]|\s 匹配表情符号和空格,然后在 input 事件中使用 replace 方法过滤掉表情符号和空格,并将过滤后的文本重新赋值给 textarea

keydown 事件中,判断输入的字符是否为空格或表情符号,如果是则使用 preventDefault 方法阻止输入。请注意,这里判断表情符号的方式使用了 Unicode 属性 \p{Emoji},需要确保您的浏览器支持此属性。

以上代码可以保证在大部分浏览器和 iOS 设备上兼容,但也可能会存在一些特殊情况需要特别处理。如果您遇到了其他问题,请提供更多的详细信息,我们将尽力为您提供更准确、专业的解决方案。

  •