编程 Javascript

jQuery实现的placeholder效果完整实例

Posted in Javascript onAugust 02, 2016

本文实例讲述了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程序设计有所帮助。

jQuery实现的placeholder效果完整实例

- Author -

Quber

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jQuery实现表格数据的动态添加与统计的代码

Jan 31 Javascript

带左右箭头图片轮播的JS代码

Dec 18 Javascript

鼠标滑过出现预览的大图提示效果

Feb 26 Javascript

jQuery插件实现大图全屏图片相册

Mar 14 Javascript

使用postMesssage()实现跨域iframe页面间的信息传递方法

Mar 29 Javascript

js事件冒泡、事件捕获和阻止默认事件详解

Aug 04 Javascript

jQuery实现动态添加tr到table的方法

Dec 26 Javascript

Webpack中css-loader和less-loader的使用教程

Apr 27 Javascript

解决前后端分离 vue+springboot 跨域 session+cookie失效问题

May 13 Javascript

vue实现学生信息管理系统

May 30 Javascript

Element DateTimePicker日期时间选择器的使用示例

Jul 27 Javascript

ant design vue导航菜单与路由配置操作

Oct 28 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