主页 / coding / 问题 / 79283682
Accepted
Eugene Karataev
Asked: 2024-12-16 12:54:27 +0800 CST

如何禁用 HTML 输入中的第一个空格？

  • 772

考虑一个带有文本输入的简单 Vue 组件（链接）。

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') value = '';
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

我想禁用此输入中的第一个空格，即如果用户输入空格，则输入字段应保持为空。但不起作用。我猜这是因为 Vue 检查了msg没有变化并拒绝了组件渲染。

我的下一次尝试是强制渲染组件（链接）。

<script setup>
import {getCurrentInstance} from 'vue'
import { ref } from 'vue'

const msg = ref('')

const instance = getCurrentInstance();

function onInput(e) {
  let value = e.target.value;
  if (value === ' ') {
    value = '';
    msg.value = value;    
    instance?.proxy?.$forceUpdate();
    return;
  }
  msg.value = value;
}
</script>

<template>
  <input :value="msg" @input="onInput" />
</template>

它可以工作，但有限制。我的项目有一个很大的组件树，并且$forceUpdate只更新当前组件，没有子组件。

key我也尝试通过改变组件来重新渲染整个子三，但在这种情况下我失去了输入的焦点。

总而言之，我似乎错过了一些东西。我不敢相信如此简单的任务需要奇怪的解决方法。请帮我找到一种简单且“最佳实践”的方法来禁用 html 输入中的第一个空格。

PS React 版本按预期工作。

import React, {useState} from 'react';

export function App(props) {
  const [value, setValue] = useState('');

  function onInput(e) {
    let v = e.target.value;
    if (v === ' ') v = '';
    setValue(v);
  }

  return (
    <div className='App'>
      <input value={value} onInput={onInput} />
    </div>
  );
}
vuejs3

3 个回答

  1. 您可以处理 @keydown 事件来检测第一个输入的符号是否为空格，如果是则阻止输入。以下是示例：

    <script setup>
import { ref } from "vue";

const msg = ref("");

function onInput(e) {
  msg.value = e.target.value;
}

function preventLeadingSpace(e) {
  if (msg.value.length === 0 && e.key === " ") {
    e.preventDefault();
  }
}
</script>

<template>
  <input :value="msg" @input="onInput" @keydown="preventLeadingSpace" />
</template>
    • 1
  2. Best Answer

    根据您的代码：不要对输入事件做出反应。太晚了。在输入事件发生之前做出反应。并过滤掉那个空格字符。

    这将为应用程序节省很多不必要的计算（msg=" "，然后 msg=""）。

    <script setup>
  import { ref } from 'vue'

  const msg = ref('')

  const filterFirstSpace = e => {
    const isEmpty = !e.target.value.length
    const isSpace = /\s/.test(e.data)

    if (isEmpty && isSpace) {
      e.preventDefault()
    }
  }
</script>

<template>
  <input
    :value="msg"
    @beforeinput="filterFirstSpace"
  />
</template>
    • 1

  3. 您应该使用正则表达式从字符串中删除第一个空格字符。

      const { createApp, ref } = Vue;

        createApp({
            setup() {
                const inputValue = ref('');

                const removeFirstSpace = () => {
                    // 使用正则表达式去除第一个空格
                    inputValue.value = inputValue.value.replace(/^\s/, '');
                };

                return {
                    inputValue,
                    removeFirstSpace
                };
            }
        }).mount('#app');
    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Input 示例</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>输入示例</h1>
        <input type="text" v-model="inputValue" @blur="removeFirstSpace" placeholder="输入一些内容">
        <p>你输入的内容是: {{ inputValue }}</p>
    </div>
</body>
</html>

    • 0

相关问题