输入框美化（placeholder）

本文主要介绍针对输入框的美化
为了兼容ie7+，不能直接使用H5的属性placeholder，但是又需要实现输入提示效果，所以总结了以下两种方式。

最终实现效果示例：

方式一：
通过添加p标签，并绑定js事件来模拟输入框光标进入隐藏效果。

<div class="foo-input foo-user">     <input class="input-text" type="text" value="">     <p class="remindp">输入您的姓名</p><i></i></div><div class="foo-input foo-tel">     <input class="input-text" type="text" value="">     <p class="remindp">输入手机号码</p><i></i></div><div class="foo-input foo-com">     <input class="input-text" type="text" value="">     <p class="remindp">输入公司全称</p><i></i></div>

JS事件

<script>    $(document).ready(function (event) {        //表单输入框        $(".foo-input").click(function () {            $(this).children(".remindp").hide();            $(this).children(".input-text").focus();        });        $(".foo-input input").blur(function () {            var val = $(this).val();            if (val != "") {                $(this).next(".remindp").hide();            } else {                $(this).next(".remindp").show();            }        });        $(".input-text").focus(function () {            $(this).next(".remindp").hide();        });    });</script>

图一就是通过这种方式实现的。主要原理是直接通过操作元素的隐藏显示来达到效果。

方式二：

方式二主要通过使用h5的placeholder属性，然后针对IE浏览器做兼容处理。

<div class="reg-tel">    <input id="mobile" name="mobile" type="text" placeholder="输入电话号码"><i></i></div><div class="reg-code clearfix">    <div class="input-code">        <input id="sureCode" name="sureCode" type="text" placeholder="输入验证码"><i></i>    </div>    <div class="get-code">        <input type="button" id="getSms" type="button" value="获取验证码"/>    </div></div>

H5属性在chrome和firefox下当然没问题啦，但是要兼容IE7及其以上呢，就需要处理一下了，其实原理还是跟方式一类似，只不过在其他浏览器中是默认效果就感觉挺好的。

<script>    /*     * jQuery placeholder, fix for IE6,7,8,9     */    var JPlaceHolder = {        //检测        _check: function () {            return 'placeholder' in document.createElement('input');        },        //初始化        init: function () {            if (!this._check()) {                this.fix();            }        },        //修复        fix: function () {            jQuery(':input[placeholder]').each(function (index, element) {                var self = $(this), txt = self.attr('placeholder');                self.wrap($('<div></div>').css({                    position: 'relative',                    zoom: '1',                    border: 'none',                    background: 'none',                    padding: 'none',                    margin: 'none'                }));                var pos = self.position(), h = self.outerHeight(true), paddingleft = self.css('padding-left');                var holder = $('<span></span>').text(txt).css({                    position: 'absolute',                    left: pos.left,                    top: pos.top,                    height: h,                    lienHeight: h,                    paddingLeft: paddingleft,                    color: '#aaa'                }).appendTo(self.parent());                self.focusin(function (e) {                    holder.hide();                }).focusout(function (e) {                    if (!self.val()) {                        holder.show();                    }                });                holder.click(function (e) {                    holder.hide();                    self.focus();                });            });        }    };    //执行    jQuery(function () {        JPlaceHolder.init();    });</script>

图二就是通过这种方式实现的，在IE7及以上都是完美显示。

优化及兼容注意事项

1. 布局问题，首先在布局上一定要注意层级关系，表单前面的小图标可能需要通过z-index来调整，不然可能不显示，一般我是用绝对定位来布局，当然也可以用背景和流布局。
2. 布局好之后设置div的padding来给小图标腾出位置。input输入框的宽度一定要跟显示的一样，不然在有些浏览器中出现输入cookie提示时就暴露问题了，会出现输入框的宽度和提示下拉框的宽度不一样，很难看。意思就是说不要用padding来设置。
3. 输入框中的字体是可以调整的，就是设置的时候一定要对input针对性的设置才行，通常浏览器自带的默认字体可能不符合整个页面设计效果，所以可能需要单独设置一下。前面两个效果都是通过设置了字体的。
4. 对input原生效果的清除，目前我常用的有如下属性
   border: none;或者设置成颜色和背景一样
   outline: none;这里是取消focus边框轮廓效果
   当然你可以添加box-shadow添加边框阴影效果，有个外发光的效果。