jQuery表单获取和失去焦点输入框提示效果的实例代码


Posted in Javascript onAugust 01, 2013
  $("#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">
 form{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;}
 label{display:block;height:40px;position:relative;margin:20px 0;}
 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;}
 h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;}
</style>
</head>
<body>
 <form class="border_radius" 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" 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>
Javascript 相关文章推荐
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
Mar 20 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
细说webpack源码之compile流程-入口函数run
Dec 26 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 Javascript
jquery实现手风琴案例
May 04 jQuery
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 #Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 #Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 #Javascript
JavaScript定时器详解及实例
Aug 01 #Javascript
js渐变显示渐变消失示例代码
Aug 01 #Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 #Javascript
JS调用CS里的带参方法实例
Aug 01 #Javascript
You might like
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
Javascript模块模式分析
2008/05/16 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
JS实现页面数据无限加载
2016/09/13 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
JS实现简易留言板特效
2019/12/23 Javascript
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
Oroton中国官网:澳洲知名奢侈配饰品牌
2017/03/26 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
行政管理专业推荐信
2013/11/02 职场文书
二年级体育教学反思
2014/01/15 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
实习报告评语
2014/04/26 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
文艺委员竞选稿
2015/11/19 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Pytorch可视化的几种实现方法
2021/06/10 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技