0

我尝试使用 onChange 处理程序将asYouType函数 from添加libphonenumber-js到我的苗条输入中，因为我不确定如何通过 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>
4

1 回答 1

6

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

于 2020-06-09T11:31:23.540 回答