如何在 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;     

返回真； }

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, '');
    }
}