如何在Lightning Web组件中使用onkeypress？

Question

我必须将输入字段限制为仅接受数字。我们不使用“闪电输入”。 如何在Lightning Web组件中使用下面的js函数？

function isNumber(evt) {
        var iKeyCode = (evt.which) ? evt.which : evt.keyCode
        if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57))
            return false;     

返回true；     }

Answer 1

请参见下文：

.html文件

<lightning-card>
    <div class="slds-m-around_medium">
        <input type="number" onkeypress={handleKeyPress} pattern="[0-9]" class="slds-input" />
    </div>
</lightning-card>

.js文件

handleKeyPress(event) {
    let input_number = event.target.value;
    console.log('Number: '+input_number); 
}    

结果/输出

Answer 2

我相信它允许“e”和“k”作为有效数字，

这就是我所做的

.html 文件

<input class="numfield" onkeydown={onlyNumericAllowed} type="number" >

.js 文件

onlyNumericAllowed(event) {
    if(event.keyCode === 69){
        event.preventDefault();
    }
    const value = event.target.value;
    console.log(event.charCode);
    if (value && (!/^[0-9]+$/.test(value) || event.keyCode == 0)) {
        this.template.querySelector('.numfield').value = value.replace(/\D/g, '');
    }
}