javascript - 输入框捕获所有输入

场景

用于制作更加高级的输入框，比如：

• US格式的数字，每三位数字一个逗号；
• 电话号码要这种格式的： 135-1234-5678，输入的时候自动加横杠；

可选开源库

懒得自己写，可以使用：inputmask.js

代码核心

如果你时间比较多，可以自己实现试试，

以下代码，采用 typescript 语法， 已经包含大部分关键代码。

实际使用时，需要找到合适位置，嵌入自己的代码逻辑。

const a = ()=>{
    // 是否未使用中文输入法（组合输入）
    let not_composing = true;

    // input-value
    let value = '';

    const input: HTMLInputElement = inputRef.value;

    input.addEventListener('paste', (event) => {
        // paste text
        const txt = event.clipboardData.getData('text');

        const idx = input.selectionStart + txt.length;
        value = value.substring(0, input.selectionStart) + txt + value.substring(input.selectionEnd);
        input.value = value;

        // focus
        input.selectionStart = idx;
        input.selectionEnd = idx;
        input.focus();

        event.preventDefault();
    });

    input.addEventListener('compositionstart', (evt: CompositionEvent) => {
        // 使用组合输入
        not_composing = false;
    });

    input.addEventListener('compositionend', (evt: CompositionEvent) => {
        // 组合输入结束
        not_composing = true;
        value += evt.data;
        input.value = value;
    });

    input.addEventListener('beforeinput', (evt: InputEvent) => {
        // 拦截所有输入，重新定义用户输入
        evt.preventDefault();
        if (not_composing && evt.data != null) {
            value += evt.data;
            input.value = value;
        }
    });

    input.addEventListener('keydown', (evt: KeyboardEvent) => {
        // backspace
        if (evt.code === 'Backspace' && value.length > 0) {
            value = value.slice(0, -1);
            input.value = value;
        }
    });
}