使用按鍵和捕捉鍵獲得輸入值

Question

我使用keypressevent並且我想在按下鍵後在input框中獲得value。我也想捕捉哪個鍵被按下。在this example我只允許用戶輸入數字到input框（我知道有一個輸入numbertype）。我正在使用setTimeout從input框中獲取value。有沒有更好的方法來完成這一點？這會失敗嗎？

var elTest = document.getElementById('test'); 
 
var elResult = document.getElementById('result'); 
 

 
function isNumber(evt, el) { 
 
    evt = (evt) ? evt : window.event; 
 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
    evt.preventDefault(); 
 
    return false; 
 
    } 
 
    setTimeout(function() { 
 
    elResult.textContent = el.value; 
 
    }, 0); 
 
    return true; 
 
} 
 

 
elTest.addEventListener('keypress', function(e) { 
 
    return isNumber(e, this); 
 
});

<input id='test' /> 
 
<div id='result'> 
 

 
</div>

Answer 1

我會用的keydown和keyup事件偵聽器的組合去由於該按鍵事件不會觸發退格或刪除。

在keydown上，檢查編號，退格/刪除輸入，並防止需要。

在鍵控上，更新輸入值的結果輸出。

var elTest = document.getElementById('test'); 
var elResult = document.getElementById('result'); 

function allowInput(evt) { 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
    var isNumber = charCode < 58 && charCode > 47; 
    var isBackspace = charCode == 8 || charCode == 46; 
    return isNumber || isBackspace; 
} 

elTest.addEventListener('keydown', function (e) { 
    if (!allowInput(e)) { 
     e.preventDefault(); 
     return false; 
    } 
    return true; 
}); 

elTest.addEventListener('keyup', function (e) { 
    elResult.textContent = this.value; 
}); 

Answer 2

我覺得你剛剛的事件和函數調用在這個對象混合。如果你使用this.value，那麼這個數字將不會在那裏，但如果你使用event.key（它給出了鍵的字符串值），那麼你應該得到正確的輸出。

var elTest = document.getElementById('test'); 
 
var elResult = document.getElementById('result'); 
 

 
function isNumber(evt, el) { 
 
    evt = (evt) ? evt : window.event; 
 
    var charCode = (evt.which) ? evt.which : evt.keyCode; 
 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) { 
 
    evt.preventDefault(); 
 
    return false; 
 
    } else { 
 
    elResult.textContent += evt.key; 
 
    } 
 
    return true; 
 
} 
 

 
elTest.addEventListener('keypress', function(e) { 
 
    return isNumber(e, this); 
 
});

<input id='test' /> 
 
<div id='result'> 
 

 
</div>