简单的邮箱登陆的提示效果类似于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>

赞 (0)

相关推荐

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

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

    当鼠标聚焦到邮箱地址文本框时,文本框内的"请输入邮箱地址"文字被清空. 效果图: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="类似于yahoo邮箱登陆的提示效果.aspx.cs" Inherits="类似于yahoo邮箱登陆的提示效果" %> <!DOCTYPE html> <html x

  • jquery实现简单文字提示效果

    本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

  • 用javascript实现改善用户体验之alert提示效果

    类似于新浪邮箱的提示效果.比较独立.在wenming版主的帮助下,已解决了高度不能适应的BUG. 使用方法很简单,在需要弹出提示的页面先引用alert.js脚本文件,如:  程序代码 <script type="text/javascript" src="alert.js"></script> 然后直接在需要提出处使用:  程序代码 sAlert("需要提示的信息"); 即可.不需要额外添加HTML代码. 完整代码: ht

  • jQuery提示效果代码分享

    jQuery提示效果代码分享

    代码一: 复制代码 代码如下: <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <

  • js实现简单的省市县三级联动效果实例

    本文实例讲述了js实现简单的省市县三级联动效果.分享给大家供大家参考,具体如下: js代码部分 //省市县数据格式 var province_city_county_data=[ { province:"四川", city:[ { cityName:"成都", county:["成都市","崇州市","金堂县"] }, { cityName:"南充", county:["仪陇县

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xht

  • jQuery实现简单的列表式导航菜单效果代码

    jQuery实现简单的列表式导航菜单效果代码

    本文实例讲述了jQuery实现简单的列表式导航菜单效果代码.分享给大家供大家参考.具体如下: 这里使用jQuery实现简单的列表式导航菜单,是根据网上的一个教程,边看边写的,经过了修正,拷贝代码即可使用.主要实现包括三个部分,一是CSS.二是引入jQuery.三是编写JS代码进行jQuery控件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-list-style-nav-menu-codes/ 具体代码如下: <h

  • jquery实现邮箱自动填充提示功能

    jquery实现邮箱自动填充提示功能

    邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 核心代码(需要jquery的支持): (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "

随机推荐