Detailed explanation of HTML onfocus gain focus and onblur lose focus events
|
HTML onfocus Event Attributes Definition and Usage The onfocus attribute is triggered when an element receives focus. onfocus is commonly used for <input>, <select> and <a>. Tip: The onfocus attribute is the opposite of the onblur attribute. Note: The onfocus attribute does not apply to the following elements: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, or <title>. Examples Triggers a function when the input field gets focus. This function changes the background color of the input field
<script>
function setStyle(x)
{
document.getElementById(x).style.background="yellow";
}
</script>
</head>
<body>
<p>Function triggered when the input field gets focus. This function changes the background color of the input field. </p>
First name: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="setStyle(this.id)">
</body>HTML onblur Event Attributes Definition and Usage The onblur attribute is triggered when the element loses focus. onblur is commonly used in form validation code (such as when a user leaves a form field). Examples Validate the input field when the user leaves it:
<script>
function upperCase()
{
var x = document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
<p>Please enter your name and move focus outside the field:</p>
Please enter your name (in English characters): <input type="text" name="fname" id="fname" onblur="upperCase()">
</body>
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Vendor Prefix: Why do we need a browser engine prefix?
>>: mysql splits a row of data into multiple rows based on commas
Recommend
MySql 8.0.11 installation and configuration tutorial
Official website address: https://dev.mysql.com/d...
How to enable or disable SSH for a specific user or user group in Linux
Due to your company standards, you may only allow...
Detailed explanation of three ways to import CSS files
There are three ways to introduce CSS: inline sty...
MySql8 WITH RECURSIVE recursive query parent-child collection method
background When developing a feature similar to c...
A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode
XML/HTML CodeCopy content to clipboard < butto...
XHTML 2.0 New Features Preview
<br />Before browsers can handle the next ge...
Detailed process of installing logstash in Docker
Edit docker-compose.yml and add the following con...
MYSQL master-slave replication knowledge points summary
An optimization solution when a single MYSQL serv...
Detailed explanation of the use and differences of various lock mechanisms in Linux
Preface: I believe that those who need to underst...
HTML form submission method case study
To summarize the form submission method: 1. Use t...
The correct way to use MySQL indexes and detailed explanation of index principles
1. Introduction Why do we need indexes? In genera...
Summary of block-level elements, inline elements, and variable elements
Block element p - paragraph pre - format text tabl...
Do not start CSS pseudo-class names with numbers
When newbies develop div+css, they need to name t...
Combining insert and select to implement the method of "inserting the maximum value of a field in the database + 1"
This article is mysql database Question 1 Import ...
In-depth understanding of Worker threads in Node.js
Table of contents Overview The history of CPU-bou...