添加 onChange 处理程序以 svelte 输入

Question

我试图使用 onChange 处理程序将asYouType函数从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>

Answer 1

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