将 onChange 处理程序添加到 svelte 中的输入

Question

我尝试使用 onChange 处理程序将asYouType函数添加libphonenumber-js到我的 svelte 输入中，因为我不确定如何通过 2 路绑定来完成此操作。

我已经设法实现了这一点，但它只会在 onBlur 上格式化数字，而不是在用户键入输入时按照预期的行为，如此处libphonenumber-js所示

如何更改我的输入，使其在用户输入时格式化？

<script>
  import { AsYouType } from "libphonenumber-js";

  export let value = "";
  export let label = "";

  let isFocused = false;
  let isTooltipVisible = false;

  const onBlur = () => {
    isFocused = false;
    isTooltipVisible = false;
  };

  const handleChange = val => {
    if (localeKey === "dfc.removal_form.phone") {
      const asYouType = new AsYouType("US");
      value = new AsYouType("US").input(val);
    }
  };
</script>

<div class="input-container input__row {isFullWidth ? 'isFullWidth' : ''}">

  <label>{label}</label>

  <input
    id={label}
    {name}
    bind:value
    on:change={e => handleChange(e.target.value)}
    on:focus={() => {
      isFocused = true;
      isTooltipVisible = true;
    }}
    on:blur={onBlur}
    on:input={() => {
      isTooltipVisible = false;
    }}
    data-ipr-selector={dataIprSelector} />
</div>

Answer 1

处理input事件，而不是change事件：https://svelte.dev/repl/bf21b14cb29e41f28efc802b56e7f152 ?version=3.23.1