1.简介
placeholder是input输入框的一个属性,熟悉网页开发的同学应该都知道它,它可以为文本框增加一个文字提示,并且在文本框开始输入或聚焦时自动隐藏,然而,placeholder在不同的浏览器中默认的样式和出现的时机都是不确定的。如果UI姐姐告诉你她希望这个地方就是统一的样式而你又不想拒绝的时候,那就得想办法去实现它啦。
2.代码实现
这里用一个span来显示placeholder的元素,并且当文本框聚焦或输入时检测是否需要显示placeholder,同时采用MutationObserver监听属性的变化。这个MutationObserver是HTML5新增的对象,用于取代传统的Mutation Event,可用来监听节点的插入删除和属性的变化等,有兴趣的同学可以百度一下。
var dc = {
//给input输入框添加placeholder
placeholder: function(input,holderStyles,styles,cstyles){
var $input = $(input);
$input.each(function(index,ele){
var $self = $(ele);
var $parent = $self.parent();
if(!$parent.data('inputholder')){
//判断是否存在一个类名为input-container的父元素
if(!$parent.hasClass('input-container')){
$self.before($('<span class="input-container"></span>'));
//新增将容器的宽高和display属性设置为和input元素一样