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

<!DOCTYPE html>
<html>
<body>
    <h1>Javascript Detect Element Focus And Blur</h1>
    
    <p>Click inside and outside the input field to fire focus/blur events.</p>
    <p id="status">Nothing happening yet.</p>

    <input id="input"/>

    <script>
        // input في متغير إسمه input يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let input = document.querySelector('#input');
        // status في متغير إسمه status يساوي id هنا قمنا بتخزين العنصر الذي يملك
        let status = document.querySelector('#status');

        // input للعنصر الذي يمثله المتغير focus هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
        input.addEventListener('focus', () => {
            // سيتم تغييره status النص الموجود في العنصر
            status.innerHTML = 'Input is on focus.';
        });

        // input للعنصر الذي يمثله المتغير blur هنا قمنا بإضافة الحدث
        // هذا الحدث يتم تنفيذه كلما قام وقف المستخدم عند العنصر
        input.addEventListener('blur', () => {
            // سيتم تغييره status النص الموجود في العنصر
            status.innerHTML = 'Input is on blur.';
        });
	</script>
</body>
</html>