vue.js - APP中input输入框限制输入内容：禁止空格，只允许大小字母、数字、汉字?

Question

如何在APP实现input输入框禁止输入空格，只允许输入大小字母、数字、汉字？

方法1：运用oninput="value=value.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')"，在ios端用原生自带键盘会出现输入文字时自动带入拼音并且叠加
方法2：@compositionstart和@compositionend、@input监听还是可以输入空格，具体代码如下：

默认 this.searchFlag = falsecompositionstart () {  this.searchFlag = true},compositionend () {  this.searchFlag = false  if (!this.searchFlag) {    this.title = this.title.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')  }},inputInfo () {  if (!this.searchFlag) {    this.title = this.title.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '')  }}

问题：如何实现禁止输入空格，并且输入汉字时拼字不会自动输入拼音

Answer 1

在移动应用（APP）中，实现一个input输入框来限制用户只能输入大小写字母、数字和汉字，并且禁止输入空格，可以通过多种方法来实现。以下是一个改进后的方法，使用input事件的监听来过滤非法字符，并处理iOS端拼音输入问题。

改进的方法

1. 监听input事件：当用户输入字符时，触发input事件。
2. 使用正则表达式过滤字符：在事件处理函数中，使用正则表达式来过滤掉除大小写字母、数字和汉字以外的所有字符。
3. 处理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端使用拼音输入法时，也不会出现自动带入拼音并且叠加的问题。同时，它也能有效地限制用户只能输入大小写字母、数字和汉字，并且禁止输入空格。