在移动应用（APP）中，实现一个input输入框来限制用户只能输入大小写字母、数字和汉字，并且禁止输入空格，可以通过多种方法来实现。以下是一个改进后的方法，使用input事件的监听来过滤非法字符，并处理iOS端拼音输入问题。
改进的方法
- 监听
input事件：当用户输入字符时，触发input事件。 - 使用正则表达式过滤字符：在事件处理函数中，使用正则表达式来过滤掉除大小写字母、数字和汉字以外的所有字符。
- 处理iOS端拼音输入问题：由于iOS输入法在输入汉字时可能会先输入拼音，然后再转换为汉字，因此需要在处理逻辑中考虑这种情况。
下面是一个示例代码片段，展示了如何在Vue.js中实现这个功能：
<template>
<input v-model="filteredTitle" @input="handleInput" />
</template>
<script>
export default {
data() {
return {
rawTitle: '', // 原始输入值，用于处理iOS端拼音输入问题
filteredTitle: '', // 过滤后的输入值，展示给用户
};
},
methods: {
handleInput(event) {
// 获取用户输入的原始字符
const rawChar = event.target.value[event.target.value.length - 1];
// 如果输入的是汉字或者空格（iOS拼音输入过程中可能会产生空格），则先记录原始值
if (rawChar === ' ' || /[\u4E00-\u9FA5]/.test(rawChar)) {
this.rawTitle += rawChar;
}
// 使用正则表达式过滤掉非法字符
const filteredValue = this.rawTitle.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '');
// 更新展示给用户的值
this.filteredTitle = filteredValue;
},
},
};
</script>
在这个示例中，我们使用了Vue.js的v-model指令来双向绑定数据。但是，我们并没有直接将用户的输入绑定到filteredTitle，而是引入了一个额外的rawTitle变量来记录用户的原始输入。在handleInput方法中，我们首先检查用户输入的最后一个字符是否是汉字或者空格（iOS拼音输入过程中可能会产生空格），如果是，则将其添加到rawTitle中。然后，我们使用正则表达式来过滤掉rawTitle中的非法字符，并将过滤后的结果赋值给filteredTitle，以展示给用户。
这种方法可以确保即使在iOS端使用拼音输入法时，也不会出现自动带入拼音并且叠加的问题。同时，它也能有效地限制用户只能输入大小写字母、数字和汉字，并且禁止输入空格。
极客观点
项目管理
HarmonyOS
ios
iOS+VueJS所以是uni-app项目？看你的描述，我觉得最好是把
oninput改用成onblur是不是会更合适一些？不过就算改变了，也得看你输入的空格位置是在哪里的。如果是在所有的内容之后连续输入空格。那么在界面上显示的内容，就是没有替换的。则是因为你绑定的
title在replace之后值并没有变更，所以文本框元素内部的inputValue就不会被替换的问题。之前在社区有过这样的问题我写过一篇笔记希望对你有帮助。 👉 绑定的 value 值和元素的 value 值不过最好是能供提比较完善的示例代码，这样的话才会比较好分析。比如说之前社区就有一个类似的但是比较 emmm 的问题？ 👉 v-model 导致中文拼音输入时带拼音 · Issue #1790 · vuejs/vue