JavaScript to display hidden form text

JavaScript to display hidden form text

This article shares the specific code of JavaScript to display hidden form text for your reference. The specific content is as follows

Implementation ideas

Use onfocus and onblur events

onfocus- - -Get the focus (mouse clicks on the input box, and there is a flashing cursor in the input box)

onblur- - - Loss of focus (the mouse is not selected in the input box, and the flashing cursor in the input box is lost)

1. Set a default value for the input box

2. Get the input box object and bind events to it: onfocus and onblur
When getting the focus (onfocus) - - - determine whether the value of the input box is the default value. If it is the default initial value, change the value to empty, the default initial value will disappear, and you can enter your own value. When removing the focus (onblur) - - - determine whether the value of the input box has no value. If not, assign the default value to the value. The default value will be displayed again after the unentered content is moved away.

3. You can also set different text colors for the focus and focus-lost states to make the two states more distinct.

Example 1:

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get/Lose Focus</title>
    <style>
        input {
            color: #ccc;
            outline: none;
        }
    </style>
</head>

<body>
    <input type="text" value="Mobile">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function() {
            if (this.value === 'mobile phone') {
                this.value = '';
            }
            this.style.color = '#333';
        }

        text.onblur = function() {
            if (this.value === '') {
                this.value = 'Mobile phone';
            }
            this.style.color = '#ccc';
        }
    </script>
</body>

</html>

Page effect:

Example 2

Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Username display hide</title>
    <style>
        input {
            font-size: 14px;
            color: #999;
            outline: none;
            padding: 3px 0 3px 10px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <!--Username shows hidden content-->
    <input type="text" value="Email/ID/Phone Number" class="userName">
    <script>
        var userName = document.querySelector('.userName');
        userName.onfocus = function() {
            if (this.value === 'email/ID/phone number') {
                this.value = '';
                this.style.borderColor = 'pink';
            } else {
                this.style.borderColor = 'pink';
                this.style.color = '#999';
            }
        }
        userName.onblur = function() {
            if (this.value === '') {
                this.value = 'Email/ID/Phone Number';
                this.style.borderColor = '#ccc';
                this.style.color = '#999';
            } else {
                this.style.borderColor = '#ccc';
                this.style.color = '#333';
            }
        }
    </script>
</body>

</html>

Page effect:

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.

You may also be interested in:
  • JS implements clicking the small eye in the form to display the password in the hidden password box
  • Hide and display form password based on JavaScript
  • JS implements the effect of adding border display to the checkbox in the form
  • How to display the contents of a form on the screen using JavaScript
  • How to display the number of elements in a form using JavaScript
  • Solution to display prompt information in password form under js

<<:  How to monitor Tomcat using LambdaProbe

>>:  Analysis of the process of building a cluster environment with Apache and Tomcat

Recommend

MySQL 8.0.15 installation and configuration method graphic tutorial under Windows

This article shares with you the graphic tutorial...

Detailed explanation of DOM DIFF algorithm in react application

Table of contents Preface What is VirtualDOM? Rea...

MySQL 5.7 decompressed version installation, uninstallation and garbled code problem graphic solution

1. Installation of the decompressed version (1). ...

A brief discussion of 3 new features worth noting in TypeScript 3.7

Table of contents Preface Optional Chaining Nulli...

CSS simulates float to achieve the effect of center text surrounding the image on the left and right

What is text wrapping around images? This is the ...

Learn about CSS label display mode in one article

Tag type (display mode) HTML tags are generally d...

What are the attributes of the JSscript tag

What are the attributes of the JS script tag: cha...

Example of troubleshooting method to solve Nginx port conflict

Problem Description A Spring + Angular project wi...

Vue login function implementation

Table of contents Written in front Login Overview...

Detailed explanation of Vue3 life cycle functions and methods

1. Overview The so-called life cycle function is ...

How to use the yum command

1. Introduction to yum Yum (full name Yellow dogU...

Vue realizes the logistics timeline effect

This article example shares the specific code of ...

Comprehensive analysis of isolation levels in MySQL

When the database concurrently adds, deletes, and...

MySQL installation diagram summary

MySQL 5.5 installation and configuration method g...

Method of implementing recursive components based on Vue technology

describe This article introduces a method to impl...