输入框美化（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">
    id="mobile" name="mobile" type="text" placeholder="输入电话号码">
div>
<div class="reg-code clearfix">
    <div class="input-code">
        id="sureCode" name="sureCode" type="text" placeholder="输入验证码">
    div>
    <div class="get-code">
        "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($('
').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 = $('').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添加边框阴影效果，有个外发光的效果。