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
Detailed explanation of keepAlive usage in Vue front-end development
Table of contents Preface keep-avlive hook functi...
MySQL 5.7.17 installation and configuration tutorial for Mac
1. Download MySQL Click on the official website d...
Analysis and solution of flex layout collapse caused by Chrome 73
Phenomenon There are several nested flex structur...
Detailed analysis of the chmod command to modify file permissions under Linux
Use the Linux chmod command to control who can ac...
js realizes the magnifying glass function of shopping website
This article shares the specific code of js to re...
How to distribute two buttons on the left and right sides of the same parent tag using CSS
This article mainly introduces the method of CSS ...
Summary of the execution issues between mysql max and where
Execution problem between mysql max and where Exe...
Try Docker+Nginx to deploy single page application method
From development to deployment, do it yourself Wh...
Several ways to clear arrays in Vue (summary)
Table of contents 1. Introduction 2. Several ways...
Windows keeps remote desktop from being automatically disconnected for a long time
Anyone who has used Windows Remote Desktop to con...
Detailed explanation on how to install MySQL database on Alibaba Cloud Server
Preface Since I needed to install Zookeeper durin...
Detailed explanation of tcpdump command examples in Linux
Preface To put it simply, tcpdump is a packet ana...
VMware Workstation installation Linux (Ubuntu) system
For those who don't know how to install the s...
The viewport in the meta tag controls the device screen css
Copy code The code is as follows: <meta name=&...
Complete steps to enable gzip compression in nginx
Table of contents Preface 1. Configure gzip compr...