体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: 实现placeholder效果的方案汇总
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

实现placeholder效果的方案汇总

来源: 易采站长站

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

方案一:

体彩排列5双期走势图摒弃原始属性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'); //调用函数


            
Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
体彩超级大乐透除八走势图 体彩超级大乐透201走势图 河南22选5和值走势图 浙江体彩6 1走势图 体彩超级大乐透走势图 体彩排列3奇偶分析 福彩双色球历史开奖号码 江苏体彩七位数历史开奖号码 体彩超级大乐透历史开奖号码 双色球走势图带连线 体彩排列3出号频率表 齐鲁风采23选5复式计算表 全国联网体彩31选7尾数走势图 江苏七位数走势图 体彩排列5出号频率表 体彩排列3走势图 体彩排列3走势图 江苏体彩七位数201走势图 体彩七星彩走势图 体彩超级大乐透复式计算器