从输入字段和v模型中删除多余的空格

Question

我在做一些我认为简单的事情时遇到了麻烦。

我有一个绑定到模型的输入，我想在模糊时修剪额外的空白。 我在组件中具有的值没有任何多余的空间，这很好，但是在视觉上，呈现的输入仍然包含额外的空间。

我已经在使用v-model.trim ，尽管它确实会修剪我收到的值，但不会在视觉上修剪输入的值。 我没有内部HTML或其他方式来强制输入以视觉方式删除它的多余空间。 我不确定在这里可以使用其他什么方法。

---

这是输入： <input id="email" v-model.trim="email" @blur="onEmailBlurHandler"> 。

我的onEmailBlurHandler方法看起来像这样（带有“调试”信息）：

onEmailBlurHandler (event: FocusEvent) {
  const target = event.target as HTMLInputElement;
  console.log('Before', target.value, this.email, target.innerText, target.innerHTML, 'end');
  target.value = this.email;
  console.log('After', target.value, this.email);
}

现在，如果我在输入中输入以下内容：

在我的控制台中，得到以下信息（请注意，任何地方都没有多余的空间）：

Before foo@bar.com foo@bar.com   end
After foo@bar.com foo@bar.com

但是，我的输入仍将保留所有多余的空间。