محرر ويب أونلاين

<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Get Last Entered Character Key & KeyCode</h1>
    <input id="input" placeholder="Enter any text"/>
    <p id="key">Last key:</p>
    <p id="keyCode">Last keyCode:</p>

    <script>
        // input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let input = document.querySelector('#input');

        // key في متغير إسمه key يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let key = document.querySelector('#key');
        
        // keyCode في متغير إسمه keyCode يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let keyCode = document.querySelector('#keyCode');

        // input للعنصر الذي يمثله المتغير keyup هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه كلما قام المستخدم بالنقر على زر في الكيبورد و رفع إصبعه عنه
        input.addEventListener('keyup', (event) => {
			// key إسم الزر الذي يتم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
            key.innerHTML = 'Last key: ' + event.key;
            // keyCode رقم اليونيكود الخاص بالزر الذي تم النقر عليه سيتم عرضه في العنصر الذي يمثله المتغير
            keyCode.innerHTML = 'Last keyCode: ' + event.keyCode;
        });
	</script>
</body>
</html>