实现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 相关文章推荐
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
Aug 28 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
一个基于react的图片裁剪组件示例
Apr 18 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
微信小程序3D轮播实现代码
Sep 19 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
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php中Socket创建与监听实现方法
2015/01/05 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
JavaScript对象学习小结
2015/09/02 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
Python是编译运行的验证方法
2015/01/30 Python
Python模拟用户登录验证
2017/09/11 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python简单实现网页内容抓取功能示例
2018/06/07 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
WxPython实现无边框界面
2019/11/18 Python
dpn网络的pytorch实现方式
2020/01/14 Python
Python ini文件常用操作方法解析
2020/04/26 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
Django返回HTML文件的实现方法
2020/09/17 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
放飞中国梦演讲稿
2014/04/23 职场文书
优秀教师事迹材料
2014/12/15 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL