Extjs

Extjs 解决IE不兼容placeholder

2018-03-28  本文已影响62人  w_w_wei

测试环境: 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;
}
上一篇下一篇

猜你喜欢

热点阅读