zoukankan      html  css  js  c++  java
  • input输入框文字提示IE兼容

    <script src="assets/js/jquery-1.9.1.min.js"></script>
    <script>
        /*
         * jQuery placeholder, fix for IE6,7,8,9
         * @author JENA
         * @since 20131115.1504
         * @website ishere.cn
         */
        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+10, top:pos.top+8, 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>
    

    根据自己的输入框大小,进行微调

    参考地址:http://www.oschina.net/code/snippet_206691_26471

  • 相关阅读:
    Ajax在表单中的应用
    jQuery实例
    Ajax之404,200等查询
    Ajax知识总结
    Ajax之eval()函数
    闭包应用
    全局预处理与执行,作用域与作用域链
    替换富文本里的px为rem
    vue2 兼容ie8
    vue-awesome-swiper 水平滚动异常
  • 原文地址:https://www.cnblogs.com/hcrs/p/5183325.html
Copyright © 2011-2022 走看看