Ext Form中的BACKSPACE键盘事件-优快云博客

本文介绍了一个在ExtJS中使用ReadOnly TextField时遇到的问题：按下Backspace键会意外地导致页面回退。文章提供了如何通过简单的JavaScript代码解决此问题的方法。

如果我们在Ext Form中有ReadOnly的TextField，那么其实我们鼠标点击该输入框，是能够获得鼠标焦点的，只是我们不能修改其中的值。

但是如果我们没注意，在ReadOnly的输入框按BACKSPACE键，本意是以为能够修改，对之前的内容进行删除，但是实际上因为其ReadOnly属性，不能修改，会导致其跳转到历史上一页，这不是我们期望的。

所以，我们可以采用如下方法来避免这个问题。

含ReadOnly的Form如下：

var form = new Ext.FormPanel({
	labelSeparator : "：",
	frame:true,
	border:false,
	items : [
		{
			xtype :'textfield',
			width : 200,
			allowBlank : false,
			name : 'name',
			fieldLabel : '姓名',
			readOnly : true        //以ReadOnly显示，鼠标可以获得焦点
		},{
			xtype:'textfield',
			width : 200,
			allowBlank : false,
			name : 'address',
			fieldLabel:'住址'
		}]
});

我们只需要加一句：

//取消readonly的组件在BACKSPACE时键盘事件时返回上一个页面
	Ext.EventManager.on(Ext.isIE ? document : window, "keydown", function(e, t) { if (e.getKey() == e.BACKSPACE &&(t.disabled || t.readOnly)) { e.stopEvent(); }});