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 添加输入限制,只准输入数字和.-+

 

评论

1 楼 linder0209 2010-12-10  

好文章，好方法，学习了