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

Question

我正在尝试使用 onChange 处理程序将 libphonenumber-js 中的 asYouType 函数添加到我的 svelte 输入中，因为我不确定如何使用 2 种方式完成绑定(bind)。

我已经设法实现了这一点，但它只会格式化 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