按下退格鍵或刪除鍵時如何執行操作

Question

因此，當我點擊退格或刪除時，我無法讓代碼執行某些操作。

我的代碼工作得很好。 它運行以下代碼，更新多個文本輸入字段的大小和值。

它調用compute（） ，它通過updateAllFields（）多次調用update （） 。

  function compute(input,number){
    var decider = String(input.value);
    updateAllFields(decider,number);
  }
  function update(label,convert,decider,number){
    var updater = document.getElementById(label);
    updater.value = parseInt(decider, number).toString(convert);
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px';
  }
  function updateAllFields(decider,number){
    update('binary',2,decider,number);
    update('octal',8,decider,number);
    update('decimal',10,decider,number);
    update('hexadecimal',16,decider,number);
  }

現在，一切都運行得很好。 我遇到了一個問題，當整個字段被刪除時，我得到NaN ，並且除非我超過NaN值，否則不能再編輯文本字段。

如果用戶點擊“Ctrl + home”，然后退格（擦除整個字段）， NaN就會出現。 我想要什么，而是在於，當將 NaN的出現，所有的文本輸入被重置為他們時，他們的占位符都顯示為相同的大小和外觀。

我查了一下，發現了以下內容：

var input = document.getElementById('display');

input.onkeydown = function() {
    var key = event.keyCode || event.charCode;

    if( key !== 8 && key !== 46 )
        return true;
};

它不起作用。 我甚至嘗試將return false替換為替換讀取替換代碼：

  function refresh(label,number){
    var refresher = document.getElementById(label);
    refresher.value = '';
    refresher.size = number;
  }
  function refreshAllFields(){
        refresh('binary','3');
        refresh('octal','2');
        refresh('decimal','4');
        refresh('hexadecimal','8');
      }

這不起作用。 我究竟做錯了什么？ 如果一個字段的整個文本字段被清除，我怎樣才能讓我的字段重置為原始狀態？

Answer 1

您不需要降低錯誤的可能性。 您需要完全防止錯誤。 只需驗證輸入數據，您就不會獲得NaN 。

如果輸入是整數，只需在compute添加一個檢查：

function compute(input,number){
    var decider = String(input.value);
    if (isNumeric(decider)) 
    {
        // do something else
        decider = "0"; // for example
    }
    updateAllFields(decider, number);
}

其中isNumeric是一個函數，用於確定字符串是否表示數字。 有很多方法可以做到這一點 ，例如：

function isNumeric(value)
{
    if (isNaN(value)) {
         return false;
    }
    var x = parseFloat(value);
    return (x | 0) === x;
}

此外，您可以停止將您的decider和number作為字符串傳遞給每個函數：

function compute(input, number){
    if (isNumeric(input.value))
    {
        updateAllFields(parseInt(input.value, number)); // val is a Number now
    } else {
        updateAllFields(0); // for example
    }       
}
function update(label,convert,val){
    var updater = document.getElementById(label);
    updater.value = val.toString(convert);
    updater.style.width = ((updater.value.length + 1) * 12.5) + 'px';
}
function updateAllFields(val) {
    update('binary',2,val);
    update('octal',8,val);
    update('decimal',10,val);
    update('hexadecimal',16,val);
}