Web Front-end
JS Tutorial
JavaScript automatically restores the default text after clicking to clear the text box_javascript skills
JavaScript automatically restores the default text after clicking to clear the text box_javascript skills
The example in this article introduces the js example code of clicking on the text box to clear the default text, leave and then restore it. It is shared with everyone for your reference. The specific content is as follows
Related knowledge:
1. Definition and usage of onclick event:
This event is triggered when an object is clicked.
Browser support:
1), IE browser supports this event.
2) Firefox browser supports this event.
3). Opera browser supports this event.
4) Google Chrome supports this event.
5), Safria browser supports this event.
Example code:
<html>
<head>
<meta charset="gb2312"/>
<title>脚本之家</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
mydiv.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
The above code registers an onclick event handler for the div. When the div is clicked, this handler will be executed to set the background color of the div to green.
2. Definition and usage of onblur event:
This event is triggered when the specified object loses focus.
Example code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>脚本之家</title>
<style type="text/css">
.mytest{
background-color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var username=document.getElementById("username");
username.focus();
username.onblur=function(){
username.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<input type="text" name="username" id="username" />
</body>
</html>
The above code binds the event handler function to the onblur event of the input element. When the input element loses focus, the background color can be set to green.
The next step is the most important thing: Click the text box to clear the default text, leave and then restore it
The text boxes that need to be filled in on many websites will give a default prompt language by default. When the mouse clicks on this text box, the default text inside can be cleared. When the entered text is deleted and the focus leaves the text box Then write the default text into the text box.
The code is as follows:
<html>
<head>
<meta charset="gb2312">
<title>点击文本框清除默认值</title>
<script type="text/javascript">
window.onload=function()
{
var username=document.getElementById("username");
username.onclick=function()
{
if(username.value=="请输入您的姓名")
{
username.value="";
this.focus();
}
}
username.onblur=function()
{
if(username.value=="")
{
username.value="请输入您的姓名";
}
}
}
</script>
</head>
<body>
<input type="text" value="请输入您的姓名" id="username" />
</body>
</html>
The above code realizes our requirements. When the text box is clicked, the content in the text box can be cleared. If no content is entered in the text box, when the mouse focus leaves the text box at this time, the value of the text box will be restored. to the default state. However, if the password box is a bit troublesome, because the password box is not displayed in plain text, the solution can be found in the next paragraph on how to implement a prompt in the password box.
How to realize the prompt appears in the password box:
Sometimes we need to have some prompt language in the login form, such as "Please enter your user name" and "Please enter your password". As for the user name, it is easy to say, but "Please enter your password" appears in the password box. This kind of language is a bit troublesome, because the content entered in the password box will not be displayed in clear code. If the type attribute is dynamically controlled, there will be compatibility issues. If the input already exists in the page, the type attribute is read-only in IE8 and browsers below IE8. So I have to think of other ways. The code is as follows:
<html>
<head>
<meta charset="gb2312">
<title脚本之家</title>
<style type="text/css">
#tx{
width:100px;
}
#pwd{
display:none;
width:100px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var tx=document.getElementById("tx");
var pwd=document.getElementById("pwd");
tx.onfocus=function(){
if(this.value!="密码")
return;
this.style.display="none";
pwd.style.display="block";
pwd.value="";
pwd.focus();
}
pwd.onblur=function(){
if(this.value!=""){
return;
}
this.style.display="none";
tx.style.display="";
tx.value="密码";
}
}
</script>
</head>
<body>
<input type="text" value="密码" id="tx"/>
<input type="password" id="pwd" />
</body>
</html>
The above code realizes our requirements. A clear prompt can appear. When entering the password, it is entered in password mode.
The implementation principle is very simple. In the default state, the text box is displayed with type="text". When the text box is clicked, the password box with type="password" is displayed. The originally displayed text box is hidden, which means that a Just a replacement.
The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to recover expired WeChat files? Can expired WeChat files be recovered?
Feb 22, 2024 pm 02:46 PM
Open WeChat, select Settings in Me, select General and then select Storage Space, select Management in Storage Space, select the conversation in which you want to restore files and select the exclamation mark icon. Tutorial Applicable Model: iPhone13 System: iOS15.3 Version: WeChat 8.0.24 Analysis 1 First open WeChat and click the Settings option on the My page. 2 Then find and click General Options on the settings page. 3Then click Storage Space on the general page. 4 Next, click Manage on the storage space page. 5Finally, select the conversation in which you want to recover files and click the exclamation mark icon on the right. Supplement: WeChat files generally expire in a few days. If the file received by WeChat has not been clicked, the WeChat system will clear it after 72 hours. If the WeChat file has been viewed,
How to recover browsing history in incognito mode
Feb 19, 2024 pm 04:22 PM
Private browsing is a very convenient way to browse and protect your privacy when surfing the Internet on your computer or mobile device. Private browsing mode usually prevents the browser from recording your visit history, saving cookies and cache files, and preventing the website you are browsing from leaving any traces in the browser. However, for some special cases, we may need to restore the browsing history of Incognito Browsing. First of all, we need to make it clear: the purpose of private browsing mode is to protect privacy and prevent others from obtaining the user’s online history from the browser. Therefore, incognito browsing
How to restore chat spark on TikTok
Mar 16, 2024 pm 01:25 PM
On Douyin, a short video platform full of creativity and vitality, we can not only enjoy a variety of exciting content, but also have in-depth communications with like-minded friends. Among them, chat sparks are an important indicator of the intensity of interaction between the two parties, and they often inadvertently ignite the emotional bonds between us and our friends. However, sometimes due to some reasons, the chat spark may be disconnected. So what should we do if we want to restore the chat spark? This tutorial guide will bring you a detailed introduction to the content strategy, hoping to help everyone. How to restore the spark of Douyin chat? 1. Open the Douyin message page and select a friend to chat. 2. Send messages and chat to each other. 3. If you send messages continuously for 3 days, you can get the spark logo. On a 3-day basis, send pictures or videos to each other
How to restore Xiaomi Cloud photo album to local
Feb 24, 2024 pm 03:28 PM
How to restore Xiaomi Cloud Photo Album to local? You can restore Xiaomi Cloud Photo Album to local in Xiaomi Cloud Photo Album APP, but most friends don’t know how to restore Xiaomi Cloud Photo Album to local. The next step is to restore Xiaomi Cloud Photo Album to local. Local method graphic tutorials, interested users come and take a look! How to restore Xiaomi cloud photo album to local 1. First open the settings function in Xiaomi phone and select [Personal Avatar] on the main interface; 2. Then enter the Xiaomi account interface and click the [Cloud Service] function; 3. Then jump to Xiaomi For the function of cloud service, select [Cloud Backup]; 4. Finally, in the interface as shown below, click [Cloud Album] to restore the album to local.
How to restore default wallpaper in win10
Feb 10, 2024 pm 10:51 PM
Windows 10's May 2019 Update features a new, brighter default desktop background. It looks great - with the new light theme. If you use Windows 10’s dark theme, you may want a darker background. Strangely, the original Windows 10 desktop background has been removed from the latest version of Windows 10. You have to download it from the web or copy its files from an old Windows 10 PC. Although we were unable to find this wallpaper image on Microsoft's official website, you can download it from other sources. We found a copy of the original Windows 10 desktop wallpaper in 4K resolution on Imgur. Additionally, there are other sizes and more default walls
How to completely remove viruses from mobile phones Recommended methods to deal with viruses in mobile phones
Feb 29, 2024 am 10:52 AM
After a mobile phone is infected with a certain Trojan virus, it cannot be detected and killed by anti-virus software. This principle is just like a computer infected with a stubborn virus. The virus can only be completely removed by formatting the C drive and reinstalling the system. , then I will explain how to completely clean the virus after the mobile phone is infected with a stubborn virus. Method 1: Open the phone and click "Settings" - "Other Settings" - "Restore Phone" to restore the phone to factory settings. Note: Before restoring factory settings, you must back up important data in the phone. The factory settings are equivalent to those of the computer. "It's the same as formatting and reinstalling the system". After the recovery, the data in the phone will be cleared. Method 2 (1) First turn off the phone, then press and hold the "power button" + "volume + button or volume - button" on the phone at the same time.
How to recover deleted emmo diary
Feb 27, 2024 pm 04:40 PM
Emmo Diary is a software specially designed for recording your mood. It provides you with a private diary space, allowing you to record important or trivial things every day. Through unique emotion recognition technology, Emmo Diary can also help you better understand and deal with your emotions. But sometimes I find that my diary has been deleted by mistake and I don’t know how to restore it. So this tutorial guide will bring you a detailed recovery guide, hoping to help everyone in need. How can emmo retrieve his previous diary? 1. Click the [Settings] icon in the lower left corner of the emmo selection screen to enter; 2. Select the [Data Backup and Restore] icon on the screen and enter the operation.
How to free up WPS cloud document space
Feb 24, 2024 pm 06:12 PM
How to clear WPS cloud document space when it is full. With the rapid development of cloud technology, more and more people are beginning to use cloud storage to store and manage their files. Among them, WPS Cloud Document, as an intelligent office software, is very popular among users. However, as the usage time increases and files accumulate, the storage space of WPS cloud documents may be filled up. So, when the WPS cloud document space is full, how should we clear it? Next, we will introduce some common cleaning methods to you. The first method is to completely delete unwanted files. W
