Svelte - on：更改输入处理程序仅在模糊事件后触发

Question

我构建了一个自定义输入字段：

<div class="field-wrapper">
  <input
    title={passwordError[$language]}
    name="password"
    on:change={e => updatePasswordError(password.length < 8)}
    bind:value={password}
    placeholder="Password"
    type="password" />
  <div style={`opacity: ${passwordError.show ? 1 : 0}`}>
    {passwordError[$language]}
  </div>
</div>

密码变量在文件顶部以 null 开头。我的问题是 on:change 处理程序不会对每个新字符触发，而只会在第一个字符和我离开字段后触发（所以在模糊事件上）。那么我做错了什么？我的目标是错误消息在具有正确的长度后消失。

谢谢您的帮助。

Answer 1

尝试这个：

<div class="field-wrapper">
  <input
    title={passwordError[$language]}
    name="password"
    on:keyup={e => updatePasswordError(password.length < 8)}
    bind:value={password}
    placeholder="Password"
    type="password" />
  <div style={`opacity: ${passwordError.show ? 1 : 0}`}>
    {passwordError[$language]}
  </div>
</div>

每次您按下此输入中的任意键时，此处的输入都应调用该函数