文件上傳控件瀏覽按鈕只讀

在使用EXT做文件上傳時，上傳控件的輸入框需要設置爲只讀，只能通過點擊【瀏覽】按鈕來上傳文件，禁止用戶通過鍵盤鼠標輸入字符，通過設置readonly屬性，輸入框是不允許用戶輸入了，但是發現點擊【瀏覽】按鈕也不響應了，無法上傳文件。

1 html的file研究

在對HTML的file元素做研究，也發現設置readonly會存在同樣的問題，網上查了查資料，可以通過禁用鼠標鍵盤的事件來達到這個效果，代碼如下：

<input type="file" οnpaste="return false" οnkeydοwn="return false"> 

 

甚至可以繞一點彎，設置一個隱藏的file來到達目的，徹底禁止鼠標輸入，代碼如下：

form name=formen> <input type="file" name="picpath" id="picpath" style="display:none" mce_style="display:none" onChange="document.formen.path.value=this.value"> <input name="path" readonly> <input type="button" value="Browse" οnclick="document.formen.picpath.click()"> </form>

2 ext的file研究

因此，通過屏蔽ext的file控件的鍵盤和鼠標事件，應該也可以做到只讀效果，但是通過addListerners，添加keydown事件，發現是不起作用的。通過查資料發現，對於Ext.form的命名空間下的所有的控件，起對於鍵盤鼠標的事件，默認是關閉的，我們必須設置【enableKeyEvents: true】，來開啓，然後處理initEvents事件就OK了，示例如下：

 new Ext.form.TextField({ xtype : 'fileuploadfield', inputType : 'file', name : 'upFile', id : 'upFile', height : 20, anchor : '95%', fieldLabel : '文件選擇', allowBlank : true, enableKeyEvents: true, initEvents : function() { var stopEvent = function(e){ e.stopEvent(); }; this.el.on("keypress", stopEvent, this); this.el.on("keydown", stopEvent, this); this.el.on("contextmenu", stopEvent, this); } })

 

3 處理特定鍵盤事件

對於鼠標單擊、移動等等事件，都和Ext.EventObject相關，例如相應鍵盤中按下的A鍵：

listeners:{ specialkey:function(field,e){ if (e.getKey()==Ext.EventObject.A){ alert(); } } }

不允許用戶輸入大寫字母：

initEvents : function() { var keyPress = function(e){ var blockchars = 'ABCDEFGHIJKMLNOPQRSTUVWXYZ'; var c = e.getCharCode(); if(blockchars.indexOf(String.fromCharCode(c)) != -1){ e.stopEvent(); } }; this.el.on("keypress", keyPress, this); }