美文网首页Extjs
Extjs 解决IE不兼容placeholder

Extjs 解决IE不兼容placeholder

作者: w_w_wei | 来源:发表于2018-03-28 19:19 被阅读62次

    测试环境: 3.1

    placeholder的默认值,写到属性_placeholder

     <textarea style="width: 260px; height: 60px;" _placeholder="输入字段,并用','隔开。例如:mail,ID" autocomplete="off" id="extparam" name="extparam" class=" x-form-textarea x-form-field "></textarea>
    

    css

    <style>
        .gray-text{
            color: #aaa;
        }
    </style>
    

    添加js处理

    <script>
        Ext.onReady(function(){
            var e = Ext.DomQuery.selectNode("textarea[@_placeholder]");
            var tal = Ext.get(e);
            tal._placehoder = e.getAttribute('_placeholder');
            if ( tal.getValue().trim() == '' ) {
                tal.dom.value = tal._placehoder;
                tal.addClass('gray-text');
            }
            tal.on('focus', function(){
                var el = this;
                var value = el.getValue();
                if(value == this._placehoder){
                    this.dom.value = '';
                    this.addClass('gray-text');
                };
            });
            tal.on('blur', function(){
                var el = this;
                var value = el.getValue();
                if(value.trim().length == 0){
                    this.dom.value = this._placehoder;
                    this.addClass('gray-text');
                }else if(value != this._placehoder){
                   this.removeClass('gray-text');
                }else{
                    this.addClass('gray-text');
                }
            });
            tal.on('keyup', function(){
                var el = this;
                var value = el.getValue();
               if(value == this._placehoder){
                    this.dom.value = '';
                    this.addClass('gray-text');
                }; 
            });
        });
    </script>
    

    初始化的时候,要注意,如果值为空就不要写个空进去了

    if ( data.result.extparam.trim() != '' ) {
        Ext.DomQuery.selectNode("textarea[@_placeholder]").value = data.result.extparam;
    }
    

    相关文章

      网友评论

        本文标题:Extjs 解决IE不兼容placeholder

        本文链接:https://www.haomeiwen.com/subject/ubxucftx.html