ExtJS 輸入框/MessageBox.prompt 禁止粘貼

回答問題http://www.iteye.com/problems/21852

 

原題是:Ext.Msg.prompt(‘’)類型彈出的輸入框，怎麼可以限制它不能複製輸入，只能手工輸入

 

看了下Msg的源碼,跟常規寫法有點區別,

我們只能通過Ext.Msg.getDialog();得到它的窗體,裏面的元素都沒暴露出來

不過我們看:

dlg.getEl().addClass('x-window-dlg');
  mask = dlg.mask;
  bodyEl = dlg.body.createChild({
      html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>'
   });

 可以猜出(或者跟蹤看源碼prompt->show裏面) prompt用的是

<input type="text" class="ext-mb-input" /> 或 <textarea class="ext-mb-textarea"></textarea>

 

於是我們可以如下代碼:

  Ext.Msg.prompt('::測試禁止::','試着粘貼');
  var dlg = Ext.Msg.getDialog();
  var t = Ext.get(Ext.get(dlg.body).select('.ext-mb-input,.ext-mb-textarea'));
  t.on('paste',function(e){
    //console.log('no paste')
    e.stopEvent();
  })

 

這個方法在firefox,ie,chrome下可行,不過據說在opera下沒有paste事件,不過1%的..我就無視了...

實在要完美點,就自己監聽keydown事件,排除Ctrl+V, shift+f10,右鍵等事件...還有瀏覽器菜單中的粘貼等,不過總有漏的時候...

 

 

對此問題,進行發散下:

1.對Msg進行擴展,添加幾個方法,以便很方便的獲取到裏面的對象,這個應該不難.

 

2.讓我們把禁止進行到底吧...

 

function testLimit(){
  Ext.Msg.prompt('::氣死不償命::','試着選擇/複製/粘貼/右鍵/輸入非數字');
  var dlg = Ext.Msg.getDialog();
  var t = Ext.get(dlg.body).select('.ext-mb-input,.ext-mb-textarea');
  //禁止粘貼
  t.on('paste',function(e){
    //console.log('no paste')
    dlg.setWidth(500)
    //e.stopEvent();
  })
  
  //禁止選擇
  //selectstart事件只對ie有效,所以用css來限制是最完美的, 其實就是一句 -moz-user-select: none;
  t.addClassOnFocus('x-unselectable');
  //t.on('selectstart',function(e){
    //console.log('no select')
  //  e.stopEvent();
  //})
  
  //禁止複製
  t.on('copy',function(e){
    //console.log('no copy')
    e.stopEvent();
  })
  
  //禁止右鍵
  t.on('contextmenu',function(e){
    //console.log('no contextmenu')
    e.stopEvent();
  })
  
  //只准輸入數字
  t.on('keypress',function(e){
    //console.log('only number')
    //special keys don't generate charCodes, so leave them alone
    if(e.ctrlKey || e.isSpecialKey()){
      return;
    }
    var maskRe = new RegExp('[' + Ext.escapeRe("0123456789.-\\+") + ']');
    if(!maskRe.test(String.fromCharCode(e.getCharCode()))){
      e.stopEvent();
    }
  })
  
  var p = new Ext.Panel({
    width:300,
    height:300,
    renderTo:Ext.getBody(),
    items:[]
  })
}

 

09.08.14 添加輸入限制,只准輸入數字和.-+