回答问题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
添加输入限制,只准输入数字和.-+
分享到:
相关推荐
part 2 is at http://download.csdn.net/source/2063350
Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种
ExtJs + api + 笔记 + 完整包
ExtJS之布局篇.mht 非常详细的学习文档
修改过的Ext.MessageBox.prompt方法,可直接调用,对输入的文字加密,适合做密码验证框
体验例子见:http://extjs.com/deploy/dev/examples/form/file-upload.html 2、GMapPanel GMap扩展 体验例子见:http://extjs.com/deploy/dev/examples/window/gmap.html 3、XmlTreeLoader XML转换成Tree ...
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
00 ExtJs.Doc 01 ExtJs.SourceCode 02 ExtJs.Librariy 00 Extjs.Doc里包含如下个文件: ExtJs.CreateDB.sql 数据库创建脚本,为了兼容低版本的朋友。 ExtJs.CreateDB.sql.bak 数据库bak文件。 ExtJs.Demo.bak 数据库...
Ext JS 4 Web Application Development Cookbook by Andrew Duncan and ... download from Sencha's website http://www.sencha.com/products/extjs/. ... See a random page in this book. Books: See all 48 items
1Extjs打包 1.1Sencha Cmd下载 地址:https://www.sencha.com/products/extjs/cmd-download/ 注意:Extjs4.XX的只能用,Sencha Cmd 4.0.5 (Windows) 来打包,不然运行的时候会报错 需要JDK1.6 或 JDK1.7,测试用1.8...
支持Extjs 3.0以上版本. 用过Extjs的人都晓得,Ext自身的DateField只支持日期选择,而TimeField却实现的又很简单。真的是苦了一帮子英雄好汉啊!此控件由本人原创,扩展了DateField。在Extjs3.0.0、3.2.1、3.3.0版本...
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
ExtJS实用开发指南.pdf
Extjs4开发笔记(一)——准备工作 http://www.mhzg.net/a/20116/20116281100279.html Extjs4开发笔记(二)——框架的搭建 http://www.mhzg.net/a/20116/201162913210280.html 目前仅实现这两步,我在参照原作者的...
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得...要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址:http://extjs.com/products/extjs/download.php
下载后请将文件解压在ext-3.x.x/examples/目录下! 支持 Extjs 3.0以上版本. 用过Extjs的人都晓得,Ext自身的DateField只支持日期选择,而TimeField却实现. ☆☆☆注意,开源啦,内附源码☆☆☆☆
Extjs4.1多个扩展 1、Ext.ux.aceeditor.Panel 2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing ...
工具包 是最新版 4.2.1.883 extjs是相当经典的框架,extjs4在前三个版本上继续优化,采用了一些主流的设计思想,效率进一步优化,而能也会存在一些问题。
深入浅出ExtJS第2版.zip深入浅出ExtJS第2版.zip深入浅出ExtJS第2版.zip深入浅出ExtJS第2版.zip