in the exampel below i have a p tag where i can type with my keyboard and it shows the key i typed:
<html>
<head>
</head>
<style>
body{
text-align: center;
background-color: black;
}
#text1,#text2,#text3{
color:rgb(0, 0, 0);
font-size: 30px;
background-color: white;
}
</style>
<body>
<p id="text1" onclick="changer1()">text1</p>
<p id="text2" onclick="changer2()">text2</p>
<p id="text3" >text2</p>
<script>
function changer1(){
window.addEventListener('keydown', function letter(event1){
document.getElementById('text1').innerHTML = event1.key;
})
}
function changer2(){
window.addEventListener('keydown', function letter(event2){
document.getElementById('text2').innerHTML = event2.key;
})
}
document.querySelector('text3').keydown(()=>{
window.addEventListener('keydown', function letter3(event3){
document.getElementById('text3').innerHTML = event3.key;
})
});
</script>
</body>
</html>
my problem is this: i want only letters to be typed on, no other keys should work except letter keys, maybe enter and backspace, but tha’s it.
i found the event.preventDefault() i don’t know how to use it.
thanks for your help.