简单的邮箱登陆的提示效果类似于yahoo邮箱


Posted in Javascript onFebruary 26, 2014

当鼠标聚焦到邮箱地址文本框时,文本框内的“请输入邮箱地址”文字被清空。

效果图:
简单的邮箱登陆的提示效果类似于yahoo邮箱

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="类似于yahoo邮箱登陆的提示效果.aspx.cs" Inherits="类似于yahoo邮箱登陆的提示效果" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type ="text/javascript" src ="Scripts/jquery-1.7.1.js"></script>
    <script type ="text/javascript" >
        $(function () {
            //对地址框进行操作
            $("#address").focus(function () {        //地址框获得鼠标焦点
                var txt_value = $(this).val();       //得到当前文本框的值
                if (txt_value == "请输入邮箱地址") {
                    $(this).val("");                 //如果符合条件,则清空文本框内容
                }
            });
            $("#address").blur(function () {         //地址框失去鼠标焦点
                var txt_value = $(this).val();       //得到当前文本框的值
                if (txt_value == "") {
                    $(this).val("请输入邮箱地址");      //如果符合条件,则设置内容
                }
            })
            //对密码框进行操作
            $("#password").focus(function () {
                var txt_value = $(this).val();
                if (txt_value == "请输入邮箱密码") {
                    $(this).val("");
                }
            });
            $("#password").blur(function () {
                var txt_value = $(this).val();
                if (txt_value == "") {
                    $(this).val("请输入邮箱密码");
                }
            })
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type ="text" id ="address" value ="请输入邮箱地址" /><br /><br />
        <input type ="text" id ="password" value ="请输入邮箱密码" /><br /><br />
        <input type ="button" value ="登录" />
    </div>
    </form>
</body>
</html>
Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
May 26 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 #Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 #Javascript
JS获取几种URL地址的方法小结
Feb 26 #Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 #Javascript
JS获取select的value和text值的简单实例
Feb 26 #Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 #Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
《雄兵连》《烈阳天道》真的来了
2020/07/13 国漫
PHPUnit PHP测试框架安装方法
2011/03/23 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
js DOM的学习笔记
2011/12/22 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
python实现支付宝转账接口
2019/05/07 Python
python中使用paramiko模块并实现远程连接服务器执行上传下载功能
2020/02/29 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
DNA基因检测和分析:23andMe
2019/05/01 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
关于Java String的一道面试题
2013/09/29 面试题
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
求职教师自荐书
2014/06/19 职场文书
给客户的检讨书
2014/12/21 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
网络研修心得体会
2016/01/08 职场文书
优秀范文:读《红岩》有感3篇
2019/10/14 职场文书