JavaScript onfocus event

 The JavaScript onfocus event is one of the JavaScript events . It is used to monitor an element to get the user's focus. Simply put, when the user's mouse cursor moves to the monitored field, it belongs to the focus situation. It is usually used in For textarea , input text and other form text input fields, the corresponding event is the onblur event. If you want to determine that the user enters a field, you can use onfocus event. If you want to determine that the user leaves a field, use onblur enent, all major browsers support onfocus event.

JavaScript onfocus basic syntax

onfocus = "javascript function to be triggered"

Similar to other events, onfocus is used to determine the user's behavior. When onfocus determines that the user focuses on a certain field, it will trigger a specific JavaScript function to perform the work that should be done. If the function cannot be triggered to start working, then onfocus is meaningless.

JavaScript onfocus event example

<script language="javascript">
function ShowFocus(){
    document.getElementById('ShowBox').innerHTML='The field has been Focus';
}
</script>
Please enter your name: <input type="text "onfocus="ShowFocus()"> <span id="ShowBox"></span>

The above example output

Please enter your name:

In the input text field in the example, an onfocus event is added. When a user moves the mouse cursor into the field, it will be monitored by onfocus, and the ShowFocus function will be triggered to display the text. Sample code There is a < span > area behind the text input field of DOM , which is used to display the text. The document.getElementById of DOM will fill the text into the < span > area through innerHTML . Once you are familiar with the onfocus technique, you can design other interesting special effects, such as changing the background color ( background-color ), changing the background image ( background-image ), popping out of the dialogue window... and other changes, and you can also design with onblur Out of focus effect.