编程 Javascript

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 相关文章推荐

JQUERY 浏览器判断实现函数

Aug 20 Javascript

javascript拓展DOM操作 prependChild insertAfert

Nov 17 Javascript

json数据的列循环示例

Sep 06 Javascript

JS 打印功能代码可实现打印预览、打印设置等

Oct 31 Javascript

Backbone View 之间通信的三种方式

Aug 09 Javascript

AngularJs concepts详解及示例代码

Sep 01 Javascript

javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

Sep 19 Javascript

使用axios发送post请求,将JSON数据改为form类型的示例

Oct 31 Javascript

Vue实现渲染数据后控制滚动条位置(推荐)

Dec 09 Javascript

JavaScript 引用类型实例详解【数组、对象、严格模式等】

May 13 Javascript

微信小程序获取手机号 JavaScript解密示例代码详解

May 14 Javascript

JavaScript常用工具函数汇总（浏览器环境）

Sep 17 Javascript

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