javascript - slim - :change handler on input fires only after blur event

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>

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