实现placeholder效果的方案汇总


Posted in Javascript onJune 11, 2015

placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示。高端浏览器支持此属性(ie10/11在获得焦点时文字消失),ie6/7/8/9则不支持。为了兼容各主流浏览器并使其呈现效果保持一致,以下三套方案仅供参考。

方案一:

摒弃原始属性placeholder,为input添加一个兄弟节点span,并为span设置绝对定位(父节点为position: relative;),使其位于input之上。html代码片段如下:

<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="text" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手机号码/邮箱地址</span>
  </div>
</li>
<li>
  <div class="inputMD" style="position: relative;">
    <input class="phInput" type="password" />
    <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">请输入密码</span>
  </div>
</li>

js代码如下(简单写了个函数,没写插件形式,呵呵):

function _placeholderText(phInput, phText) { //定义函数,传递2个参数——input输入框和text提示文本的id或者class
  var $input = $(phInput);
  var $text = $(phText);
  $input.each(function() { //页面加载时遍历所有仿placeholder的input
    var _this = $(this);
    var _text = _this.siblings(phText);
    if($.trim(_this.val()) == '') {
      _this.val("");
      _text.show();
    } else {
      _text.hide();
    }
  });
  $text.on('click', function() { //点击提示信息,input获取焦点
    $(this).siblings(phInput).focus();
  });
  $input.on('input propertychange blur', function() { //为input注册事件,value值改变(其实是属性发生变化)时以及失去焦点时判断value值是否为空
    var _this = $(this);
    if(_this.val() == '') {
      _this.siblings(phText).show();
    } else {
      _this.siblings(phText).hide();
    }
  });
}

_placeholderText('.phInput', '.phText'); //调用函数

个人总结:方案一适用于登录页面,但对于后台form表单及前台的搜索页面不太适合,因为要增加新的提示文本标签,不太友好。

方案二:

同样摒弃原始属性placeholder,为<input>添加一个属性phText="手机号码/邮箱地址"。默认状态下,value值为提示文本并且颜色为灰色;<input>获得焦点时,若value值等于phText属性值,则value值置空;<input>失去焦点时,若value值为空,则value值为提示文本。js代码如下:

function inputJsDIY(obj, colorTip, colorTxt) { //定义函数,传递3个参数——DOM对象、提示文本的颜色值、输入文本的颜色值
  colorTip = colorTip || '#aaaaaa';
  colorTxt = colorTxt || '#666666';
  obj.each(function() {
    var _this = $(this);
    _this.css({"color": colorTip}); //输入框颜色默认置为提示文本的颜色值
    if($.trim(_this.val()) == "") { //判断value值是否为空,若为空则value值赋值等于提示文本
      _this.val(_this.attr("phText"));
    } else if(_this.val() != _this.attr("phText")) {
      _this.css({"color": colorTxt}); //正常的输入文本颜色值
    }
  });
  obj.on("focus", function() { //获取焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if(value == _this.attr("phText")) {
      _this.val("");
    }
    _this.css({"color": colorTxt});
  });
  obj.on("blur", function() { //失去焦点时做判断
    var _this = $(this);
    var value = _this.val();
    if($.trim(value) == "") {
      _this.val($(this).attr("phText")).css({"color": colorTip});
    }
  });
  obj.parents("form").on("submit", function() { //提交表单时去除提示文本(把提示文本置空)
    obj.each(function() {
      var _this = $(this);
      if(_this.val() == _this.attr("phText")) {
        _this.val("");
      }
    });
  });
}

inputJsDIY($('.phInput'), '#aaa', '#666'); //调用函数

个人总结:方案二比较适合后台页面form表单及前台搜索页面,操作简单,无附加标签。缺点是不能用于password类型的<input>,而且<input>获得焦点时的提示文本消失(value值等于phText属性值时),这一点与原始的placeholder属性不同。

另外,也可以把phText属性改为placeholder属性,支持的浏览器呈现原始效果,不支持的浏览器通过js判断{'placeholder' in document.createElement('input')}调用方案二中的函数。此折中方案也有其缺点,各浏览器呈现的效果不完全一样。

方案三:

为不支持placeholder的浏览器写一个方法,首先把placeholder值赋给<input>并且颜色置为灰色,然后<input>获得焦点时判断value值等于placeholder值的话,把光标移至最前面(this.createTextRange和this.setSelectionRange)。当发生输入操作时,先把value值置为空,然后再接收输入值。另外,对于<input type="password">要为其新增一个<input type="text">用来显示提示文本,当发生输入操作时,需要把<input type="text">隐藏,然后把<input type="password">显示出来并让其获得焦点。此方案也有一些小缺陷,那就是当用鼠标右键粘贴时会出现bug。

总体上来讲,几种方案各有优缺点。登录页面我更倾向于使用方案一,呈现效果完全一致,仅仅是增加个新标签也不算麻烦。后台form表单和前台搜索页面更倾向于方案二,简单有效,只是在获得焦点时提示文本消失。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JS 创建对象(常见的几种方法)
Nov 03 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue实现模态框的通用写法推荐
Feb 26 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 #Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 #Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 #Javascript
javascript 常见功能汇总
Jun 11 #Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 #Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 #Javascript
JQuery遍历DOM节点的方法
Jun 11 #Javascript
You might like
php5.3 废弃函数小结
2010/05/16 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
JQuery核心函数是什么及使用方法介绍
2016/05/03 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
webpack源码之loader机制详解
2018/04/06 Javascript
JS实现将二维数组转为json格式字符串操作示例
2018/07/12 Javascript
[01:05:24]Ti4 冒泡赛第二天 iG vs NEWBEE 3
2014/07/15 DOTA
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
python冒泡排序算法的实现代码
2013/11/21 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
详解Selenium+PhantomJS+python简单实现爬虫的功能
2019/07/14 Python
python微信公众号开发简单流程实现
2020/03/09 Python
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
单位门卫岗位职责
2013/12/20 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
班主任个人工作反思
2014/04/28 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书