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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
DOM基础教程之使用DOM控制表单
Jan 20 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 Javascript
浅谈es6中的元编程
Dec 01 Javascript
iview实现动态表单和自定义验证时间段重叠
Jan 10 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
解析yii数据库的增删查改
2013/06/20 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
HR vs CL BO3 第二场 2.13
2021/03/10 DOTA
一种JavaScript的设计模式
2006/11/22 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS实现可展开折叠层的鼠标拖曳效果
2015/10/09 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
2020/07/20 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python基础教程之匿名函数lambda
2017/01/17 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
django model object序列化实例
2020/03/13 Python
谈谈python垃圾回收机制
2020/09/27 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
婚纱店策划方案
2014/05/22 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
php png失真的原因及解决办法
2021/11/17 PHP