如何获取Lightning-Input组件中用户输入的无效内容的实际值

可行解决方案 #

方案1：使用oninput事件捕获原始输入 #

oninput事件触发时机早于lightning-input的内置校验逻辑，此时可以直接拿到用户输入的原始内容，不会被组件清空：

<!-- test.html -->
<template>
    <lightning-input formatter="currency" oninput={handleInput} onchange={handleChange}></lightning-input>
</template>

// test.js
import { LightningElement } from 'lwc';
export default class Test extends LightningElement {
    // 存储用户输入的原始值
    rawInputValue = '';

    handleInput(event) {
        // 此处获取未经过校验的原始输入内容
        this.rawInputValue = event.target.value;
        console.log('原始输入内容：', this.rawInputValue);
    }

    handleChange(event) {
        const validValue = event.target.value;
        if (validValue === '' && this.rawInputValue !== '') {
            console.log('用户输入了无效内容，原始值为：', this.rawInputValue);
            // 此处可自行补充无效值的处理逻辑
        }
    }
}

方案2：直接访问组件Shadow DOM内的原生输入框 #

如果需要在change、blur等事件触发时也能拿到原始输入，可以直接读取lightning-input封装的原生input元素的value：

handleChange(event) {
    const nativeInput = event.target.shadowRoot.querySelector('input');
    const rawValue = nativeInput.value;
    const validValue = event.target.value;

    if (validValue === '' && rawValue !== '') {
        console.log('无效输入的原始内容：', rawValue);
    }
}

注意：该方案依赖lightning-input的内部DOM结构，若后续Salesforce更新组件内部实现可能会失效，优先推荐使用方案1。

内容的提问来源于stack exchange，提问作者Gabe Givelber