Svelte

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>

密码变量在文件顶部以空值开始。我的问题是 on:change 处理程序不会对每个新角色都触发，而只会对第一个角色和我离开场地后触发（因此在 on blur 事件上）。那我做错了什么？我的目标是错误消息在长度正确后消失。

感谢您的帮助。

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>

此处的输入应在您每次在此输入内按任意键时调用该函数

Answer 2

你应该使用 reactive statements 以防你想在值更改时调用函数。

<script>
$:updatePasswordError(password.length < 8)
</script>

Svelte - on:change 输入处理程序仅在模糊事件后触发

Svelte - on:change handler on input fires only after blur event

javascript