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;
}