<style>
html, body {
background: #2c1238;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
input {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background: #ffde91;
color: #422a4c;
font-size: 20px;
padding: 10px;
border: none;
border-radius: 10px;
outline: none;
text-align: center;
}
::placeholder {
color: #422a4c;
}
</style>
<script>
var inputField = document.querySelector('#numbers-only');
inputField.onkeydown = function(event)
{
// Only allow if the e.key value is a number or if it's 'Backspace'
if(isNaN(event.key) && event.key !== 'Backspace')
{
alert("plouf");
event.preventDefault();
}
};
</script>
<input id="numbers-only" type="text" placeholder="Numbers Only" />
<div class="field-label">
Can only enter digits and periods, using <code>keydown</code>:
</div>
<br>
<input type="text" class="field" id="input1">
<div class="warning">
<p>Beware of the leopard</p>
</div>