Home Web Front-end JS Tutorial jQuery responds to mouse events and hides and displays input default values_jquery

jQuery responds to mouse events and hides and displays input default values_jquery

May 16, 2016 pm 04:38 PM
input default value mouse events

Share an example of how jQuery hides and shows the input default value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery 隐藏与显示 input 默认值</title> 
<script language="javascript" src="jquery-1.7.1.min.js"></script> 
</head> 
<body> 
<p><input type="text" value="请输入邮箱地址" id="email" id="email" /></p> 
<p><input type="button" value="提交" /></p> 
<script type="text/javascript"> 
$("#email").focus(function(){ 
var email_txt = $(this).val(); 
if (email_txt == this.defaultValue) { 
$(this).val(""); 
} 
}) 
$("#email").blur(function(){ 
var email_txt = $(this).val(); 
if (email_txt == "") { 
$(this).val(this.defaultValue); 
} 
}) 
</script> 
</body> 
</html>
Copy after login
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Learn to use Vue's v-on instruction to handle mouse move-in and move-out events Learn to use Vue's v-on instruction to handle mouse move-in and move-out events Sep 15, 2023 am 08:34 AM

Learn to use Vue's v-on instruction to handle mouse move-in and move-out events. Mouse move-in and move-out events are one of the common interactive effects in Web pages. Vue provides the v-on instruction to handle these events conveniently. This article will introduce how to use Vue's v-on directive to handle mouse move-in and move-out events, and provide specific code examples. Before using Vue's v-on directive to handle mouse move-in and move-out events, we need to understand the basic usage of the v-on directive. The v-on directive is used to listen to DOM events and

How to encapsulate input components and unified form data in vue3 How to encapsulate input components and unified form data in vue3 May 12, 2023 pm 03:58 PM

Preparation Use vuecreateexample to create a project. The parameters are roughly as follows: use native input. Native input is mainly value and change. The data needs to be synchronized when changing. App.tsx is as follows: import{ref}from'vue';exportdefault{setup(){//username is the data constusername=ref('Zhang San');//When the input box changes, synchronize the data constonInput=;return( )=>({

How to implement laravel input hidden field How to implement laravel input hidden field Dec 12, 2022 am 10:07 AM

How to implement the laravel input hidden field: 1. Find and open the Blade template file; 2. Use the method_field method in the Blade template to create a hidden field. The creation syntax is "{{ method_field('DELETE') }}".

Event Types in JavaScript: Common Keyboard and Mouse Events Event Types in JavaScript: Common Keyboard and Mouse Events Sep 03, 2023 am 09:33 AM

JavaScript provides a wide range of events that allow you to interact with and respond to user actions on web pages. Among these events, keyboard and mouse events are the most commonly used. In this article, we'll look at the different types of keyboard and mouse events in JavaScript and see examples of how to use them. Keyboard events Keyboard events occur when a user interacts with the keyboard, such as pressing a key, releasing a key, or typing a character. Keyboard events allow us to do some cool things, such as checking if the user entered something correctly into a form, or that something happens when a specific key is pressed. It's as if the website is listening to the keys you press and reacts accordingly. Keyboard events are divided into three types: keydown event

What to do if there is no cursor when clicking on the input box What to do if there is no cursor when clicking on the input box Nov 24, 2023 am 09:44 AM

Solutions for clicking the input box without a cursor: 1. Confirm the focus of the input box; 2. Clear the browser cache; 3. Update the browser; 4. Use JavaScript; 5. Check the hardware device; 6. Check the input box properties; 7. Debug JavaScript code; 8. Check other elements of the page; 9. Consider browser compatibility.

v-on directive in Vue: how to handle mouse events v-on directive in Vue: how to handle mouse events Sep 15, 2023 am 11:39 AM

v-on instruction in Vue: How to handle mouse events, specific code examples are needed. Vue.js is a popular JavaScript framework that uses a componentized approach to build user interfaces. In Vue, you can use the v-on directive to handle various mouse events, such as click, hover, scroll, etc. This article will introduce how to use the v-on directive to handle mouse events and provide specific code examples. In Vue, the v-on directive is used to bind event handlers. Its syntax is v-on: event name, for example

Detailed explanation of input box binding events in Vue documents Detailed explanation of input box binding events in Vue documents Jun 21, 2023 am 08:12 AM

Vue.js is a lightweight JavaScript framework that is easy to use, efficient and flexible. It is one of the most popular front-end frameworks currently. In Vue.js, input box binding events are a very common requirement. This article will introduce the input box binding events in the Vue document in detail. 1. Basic concepts In Vue.js, the input box binding event refers to binding the value of the input box to the data object of the Vue instance, thereby achieving two-way binding of input and response. In Vue.j

How to use the input box carriage return event and verification function in the Vue document How to use the input box carriage return event and verification function in the Vue document Jun 20, 2023 am 09:13 AM

Vue is a popular JavaScript front-end framework with a responsive data binding and component system at its core. In Vue applications, the input box is one of the most commonly used UI elements. When the user enters text, we hope to listen for the carriage return event and validate the input before submitting. This article will introduce the input box enter event and verification function usage in the Vue document. 1. The carriage return event of the input box in Vue. Monitoring the carriage return event of the input box in Vue is very simple.

See all articles