jQuery实现的placeholder效果完整实例


Posted in Javascript onAugust 02, 2016

本文实例讲述了jQuery实现的placeholder效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现的placeholder效果完整实例

具体代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>jQuery实现placeholder效果</title>
  <script src="jquery-1.7.2.min.js"></script>
  <script>
    $(function () {
      initEvent();
    });
    //初始化提示内容的颜色
    function initEvent() {
      $('input.holder').each(function () {
        var $this = $(this), holder = $this.data('holder');
        if (holder) {
          $this.css('color', '#a9a9a9').val(holder);
        }
      });
      //获取焦点时设置内容的颜色和值为空
      $(document).off('focus', 'input.holder').on('focus', 'input.holder', function () {
        var $this = $(this);
        if ($this.val() === $this.data('holder')) {
          $this.css('color', 'black').val('');
        }
      });
      //失去焦点后还原提示内容
      $(document).off('focusout', 'input.holder').on('focusout', 'input.holder', function () {
        var $this = $(this);
        if ($.trim($this.val()) === '') {
          $this.css('color', '#a9a9a9').val($this.data('holder'));
        }
      });
    }
  </script>
</head>
<body>
  <input type="text" class="holder" name="name" value="" data-holder="请输入账户" /><br><br>
  <input type="text" class="holder" name="name" value="" data-holder="请输入密码" />
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
Mar 21 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
js数组方法扩展实现数组统计函数
Apr 09 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
浅谈JS的二进制家族
May 09 Javascript
AngularJS基础 ng-keyup 指令简单示例
Aug 02 #Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 #Javascript
深入浅析search 搜索框的写法
Aug 02 #Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 #Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 #Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
Aug 02 #Javascript
You might like
如何隐藏你的.php文件
2007/01/04 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP仿微信多图片预览上传实例代码
2016/09/13 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
JS 时间显示效果代码
2009/08/23 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
a标签click和href执行顺序探讨
2014/06/23 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python利用QQ邮箱发送邮件的实现方法(分享)
2017/06/09 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
python破解同事的压缩包密码
2020/10/14 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
关于读书的演讲稿1000字
2014/08/27 职场文书
个人收入证明模板
2014/09/18 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS