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 相关文章推荐
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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 无限级 SelectTree 类
2009/05/19 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
jquery异步跨域访问代码
2013/06/28 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
Python将多个excel表格合并为一个表格
2021/02/22 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
乔迁宴答谢词
2014/01/21 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
办公室务虚会发言材料
2014/10/20 职场文书
学生通报表扬范文
2015/05/04 职场文书
英文投诉信格式
2015/07/03 职场文书
创业计划书之烤红薯
2019/09/26 职场文书