简单的邮箱登陆的提示效果类似于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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
jQuery 入门级学习笔记及源码
Jan 22 Javascript
js实现鼠标感应图片展示的方法
Feb 27 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
如何获取vue单文件自身源码路径
May 06 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
js基于canvas实现时钟组件
Feb 07 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
php设置编码格式的方法
2013/03/05 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
PHP 8新特性简介
2020/08/18 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
python 返回一个列表中第二大的数方法
2019/07/09 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
小学生演讲稿
2014/01/12 职场文书
服务员岗位职责
2014/01/29 职场文书
安全检查管理制度
2014/02/02 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
音乐幼师求职信
2014/07/09 职场文书
公司员工离职证明书
2014/10/04 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs