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

【问题标题】：How to use onkeypress in Lightning web components?如何在 Lightning Web 组件中使用 onkeypress？
【发布时间】：2019-08-06 09:13:15
【问题描述】：

我必须限制输入字段只接受数字。我们没有使用“闪电输入”。如何在 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;

返回真； }

【问题讨论】：

标签： salesforce web-component salesforce-lightning

【解决方案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); 
}

结果/输出

【讨论】：

【解决方案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, '');
    }
}

【讨论】：