如果在輸入字段中輸入了錯誤的類型，在Chrome中顯示消息

如果用戶嘗試在輸入中輸入不匹配的類型（在我的情況下是數字輸入），Chrome（55.x）中不會出現任何外觀。爲了提高可用性，我希望顯示一個彈出窗口，讓用戶知道他們正試圖輸入無效數據，而不是讓他們認爲輸入是「破碎」的。如果在輸入字段中輸入了錯誤的類型，在Chrome中顯示消息

這是很容易在FF純JS實現（這將允許輸入失配系，它只是無效）：

input.addEventListener('input', function() { 
    if (!this.checkValidity()) { 
     this.value = ''; 
     console.log('please enter a number!');    
    } 
}

由於Chrome實際上並沒有什麼投入，但是，有效性輸入爲空時檢查總是通過;它似乎沒有對錯誤的輸入做任何事情，除了忽略它。

有什麼方法可以覆蓋此行爲，或以其他方式實現預期效果？

來源

2017-01-25 chrBrd

當然，你可以爲keyup做一個監聽器，它會給你被按下的鍵。

<script> 
    var numInput = document.getElementById("num"); 
    numInput.addEventListener("keyup", function(e) { 
     if (isNaN(String.fromCharCode(e.which))) { 
      alert("Must be a number"); 
     } 
    }); 
</script>

來源

2017-01-25 23:26:55 nixkuroi

我曾考慮過這種方法，但因爲它會變得非常混亂 - 您必須考慮Delete和Backspace以及可以在輸入字段上操作的任何鍵盤快捷方式;而不是一個很好的，簡單的功能，你可以迅速結束了令人費解的代碼。雖然我很欣賞你的答案（並且它比我的代碼更優雅），但如果它選擇的是默認行爲，我將採用懶惰選項。 ;） – chrBrd

如何設置最後一個輸入值並檢查是否如此？

let input = document.querySelector('input'); 
let lastInput = input.value; 
input.addEventListener('input', (e) => { 
    if (e.target.value === lastInput) { 
     alert("Input must be a number"); 
    } 
    lastInput = e.target.value; 
});

來源

2017-01-25 23:45:44

不匹配的類型根本不會將其設置爲輸入的值，'input.value'總是空的 - 具體來說，使用您的代碼意味着如果刪除了有效數字，則會彈出消息。這裏的困難是讓它識別輸入的空白，因爲它被髮送了無效的數據，而由於用戶刪除了某些內容而被清空。 – chrBrd

因此，無論何時輸入事件發生，我更新lastInput，以便它可以檢測到刪除。我嘗試了鉻，似乎與刪除工作。 –

看起來我有點誤會 - 這可能是由於Chrome中的錯誤，這是不尋常的行爲。使用你的代碼，在字段中輸入一個字母。你會得到警報。該字段仍然是空的，並且'lastInput'和'target.value'都沒有值。現在按下「Backspace」 - 你會再次看到警報。不知道爲什麼會發生這種情況，因爲沒有任何東西需要刪除。恐怕我不會接受這個答案，因爲答案並不完美，即使這不是你的錯，但是它是一個很好的嘗試。 – chrBrd

如果在輸入字段中輸入了錯誤的類型，在Chrome中顯示消息

回答

相關問題