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
14 techniques for high-performance websites
Original : http://developer.yahoo.com/performance...
Solution for Vue routing this.route.push jump page not refreshing
Vue routing this.route.push jump page does not re...
Vue project packaging and optimization implementation steps
Table of contents Packaging, launching and optimi...
Implementation steps of vue-element-admin to build a backend management system
Recently, when I was working on a conference heal...
CSS to implement QQ browser functions
Code Knowledge Points 1. Combine fullpage.js to a...
Detailed explanation of JavaScript BOM composition and common events
Table of contents 1. BOM 2. Composition of BOM 2....
Summary of 10 amazing tricks of Element-UI
Table of contents el-scrollbar scroll bar el-uplo...
How to use Docker to build a tomcat cluster using nginx (with pictures and text)
First, create a tomcat folder. To facilitate the ...
Explanation on whether to choose paging or loading in interactive design
The author of this article @子木yoyo posted it on hi...
HTML uses the title attribute to display text when the mouse hovers
Copy code The code is as follows: <a href=# ti...
A brief analysis of MySQL's WriteSet parallel replication
【Historical Background】 I have been working as a ...
Implementation example of uploading multiple attachments in Vue
Table of contents Preface Core code File shows pa...
wget downloads the entire website (whole subdirectory) or a specific directory
Use wget command to download the entire subdirect...
Windows 10 installation vmware14 tutorial diagram
Software Download Download software link: https:/...
About the implementation of JavaScript carousel
Today is another very practical case. Just hearin...