<!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文本框输入文字后文本框提示语消失特效-xw素材网</title> <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function(){ //第一种 $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦型输入框验证 $(this).focus(function(){ $(this).siblings("span").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } }); }); //第二种 $("#keydown .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } $(this).keyup(function(){ var val=$(this).val(); $(this).siblings("span").hide(); }).blur(function(){ var val=$(this).val(); if(val!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } }) }); }) </script> <style type="text/css"> .formbox{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} .formbox h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;} .formbox label{display:block;height:40px;position:relative;margin:20px 0;} .formbox label span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;} .border_radius{border-radius:5px;color:#B00000;} </style> </head> <body> <form class="border_radius formbox" id="focus"> <h2>聚焦型提示语消失</h2> <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> </form> <form class="border_radius formbox" id="keydown"> <h2>输入型提示语消失</h2> <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> </form> </body> </html>
相关推荐
Qt为应用程序设计提供了一些常用的标准对话框,如打开文件对话框...实例samp6_1演示使用这些对话框,下方的文本框显示打开文件的文件名或一些提示信息,某些对话框的输入结果可应用于文本框的属性设置,如字体和颜色。
1 我个人感觉,这个实例用文本框实现下拉框的最好办法. 2 先把数据填充到datatale表(内存中的数据表), 我是手动填进去的.大家也可以从SQL取出数据赋给datatable表 3 实现的模糊查询, 是直接从内存中查询, 从SQL库中查...
3 1.3本选题的设计背景 一直以来就想做一个比较实用的通讯录管理系统,这样可以方便我对于身边联系人信 息的管理,防止遗忘和丢失。 在这样一个信息化的社会里,人们的生活也越来越离不开电脑了,本次通过做个人通 ...
3 1.3本选题的设计背景 一直以来就想做一个比拟实用的通讯录管理系统,这样可以方便我对于身边联系人信 息的管理,防止遗忘和丧失。 在这样一个信息化的社会里,人们的生活也越来越离不开电脑了,本次通过做个人通 ...
第3步:设置保护用户密钥的密码 首先在打开的设置密码对话框中,在提示密钥输入的文本框中输入保护pgp_user用户密 钥的密码:(如:123456789)在确认框中再次输入。 然后,单击<下一步>按钮。其余操作不需改动安装...
使用方法很简单,选择网络诊断工具,然后根据提示填上所有文本框,然后点击开始诊断。在诊断过程中,窗口可能没有响应,这是正常现象,在诊断完成后,工具界面就恢复正常了。 如果大家需要报告错误的时候,可以将...
1.“文本框”也能输入多重幂指数 122 2.怎样关闭拼写错误标记 122 3.附加段落格式的去除 123 4.附加字符格式的去除 123 5.巧用多级列表功能编号 123 6.解决“公式编辑器”调入速度慢的问题 123 7.插入其它语种的特殊...
[销售id]) = true then '弹出提示"销售id"文本框不可以为空信息 msgbox "请输入" 销售id",不可为空! ",vbokonly,"输入" 销售id"" '把光标置于"销售id"文本框内 me! [销售id].setfocus '退出子过程 exit sub elseif ...
设计任务与要求 制作一个简单的通讯簿,要求可对朋友的姓名、性别、手机号码、寝室号和QQ号等信 息保存、查询、修改和删除等功能。具有友好界面,且需要用户名和密码登陆进入系统 。使用数据库作为后台连接。 2. ...
若不是收费会员,提示升级VIP会员),点击一口买断,则输入一定额的出价金额实现买断关键字(买断关键字的金额后台可以设置)。 管理我的竞价:分为进行中的竞价,已成交的竞价,未成交的竞价 进行中的竞价:显示...
没法下载,到这里折腾一把试试。 本文由abc2253130贡献 doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT,或下载源文件到本机查看。 C#(WINFORM)学习 一、 C#基础 基础 类型和变量 类型和变量 类型 C# 支持两...
第三步:在登陆后的界面文本框输入文本,然后发送 可以同时启动多个客户端 实现群聊。 浮动的广告 嵌套在html中 各种EJB之间的调用示例 7个目标文件 摘要:Java源码,初学实例,EJB调用实例 各种EJB之间的调用源码...
第三步:在登陆后的界面文本框输入文本,然后发送 可以同时启动多个客户端 实现群聊。 浮动的广告 嵌套在html中 各种EJB之间的调用示例 7个目标文件 摘要:Java源码,初学实例,EJB调用实例 各种EJB之间的调用源码...