Solution to the problem of text position jumping when the search text box leaves the focus

Solution to the problem of text position jumping when the search text box leaves the focus

When setting the text in the search text box, the position jumps when leaving the focus

Copy code
The code is as follows:

//Search text box
$("#txtSearch").focus(function () {
if ($(this).val() == "Please enter the search keyword") {
$(this).val("");
$(this).css("color", "black");
}
}).blur(function () {
if ($(this).val() == "") {
$(this).css("color", "gray").val("Please enter the search keyword");
}
});

Add in css

Copy code
The code is as follows:

#txtSearch
{
width:480px;
height:20px;
vertical-align:middle;
}

<<:  How to implement horizontal bar chart with percentage in echarts

>>:  Teach you to quickly build a web cluster project based on nginx

Recommend

Vue.js implements tab switching and color change operation explanation

When implementing this function, the method I bor...

Getting started with JavaScript basics

Table of contents 1. Where to write JavaScript 2....

Multiple ways to implement two-column layout with fixed width on the left and adaptive width on the right using CSS

7 ways to implement a two-column layout with fixe...

CSS Reset style reset implementation example

Introduction: All browsers come with default styl...

mysql 5.7.20 win64 installation and configuration method

mysql-5.7.20-winx64.zipInstallation package witho...

Detailed explanation of referential integrity in SQL (one-to-one, one-to-many, many-to-many)

1. Referential Integrity Referential integrity re...

mysql8.0.23 msi installation super detailed tutorial

1. Download and install MySql Download MySql data...

Use of Linux telnet command

1. Introduction The telnet command is used to log...

Vue implements file upload and download

This article example shares the specific code of ...

How to optimize MySQL indexes

1. How MySQL uses indexes Indexes are used to qui...

JavaScript jigsaw puzzle game

This article example shares the specific code of ...

How to use the realip module in Nginx basic learning

Preface There are two types of nginx modules, off...

MySQL 8.0.20 installation and configuration method graphic tutorial

MySQL download and installation (version 8.0.20) ...

Detailed explanation of three ways to wrap text in el-table header

Table of contents Problem Description Rendering T...

MySQL time difference functions (TIMESTAMPDIFF, DATEDIFF), date conversion calculation functions (date_add, day, date_format, str_to_date)

1. Time difference functions (TIMESTAMPDIFF, DATE...