小问题 小技巧:敲回车默认提交
最近做一个简单的登录界面,发现一个小问题,贴出来和大家分享一下。如果大家看着不值一提,请大家拍砖。
平时可能太大意,有些小问题居然都没有发现。我做一个不同的管理员进行管理时,有个dorpdownlist进行选择,就无法进行使用回车键进行登录;如图: 平时进行登录总是没有遇到这样情况,以为敲回车登录是一件很“天经地义”的事,可是这次我总是查了很多原因就是没有发现蛛丝马迹。不知道具体是什么原因。
程序的执行如上图一样,Page_Load执行之后就完了,没有继续执行。无奈之下,我将用户名改为TextBox 下图:
发现程序当我敲回车登录时,程序执行了Button的Click事件。
于是我产生疑问了:
1、难道一个页面必须要有两个TextBox?
2、如果页面再放一个TextBox,将TextBox隐藏是否可以?
3、放入Hidden控件不知是否可以?
带着这些疑问,我依次做了实验,发现TextBox隐藏、Hidden控件都是不行的!如下图:
我就看看form中是否可以设置一些东西,原来form中有DefaultButton属性,我将DefaultButton="ButtonLogin",页面上只有一个TextBox,发现敲回车居然执行了提交。其实在页面中已经生成这样的代码:
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ButtonLogin')"
我认为:DefaultButton的设置成为了下面的一段JS了。
<script type="text/javascript">
function WebForm_FireDefaultButton(event, target) {
if (event.keyCode == 13 && !(event.srcElement && (event.srcElement.tagName.toLowerCase() == "textarea"))) {
var defaultButton = document.getElementById(target);
if (defaultButton && typeof(defaultButton.click) != "undefined") {
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
return true;
}
</script>
页面中如果有两个或者两个以上的TextBox就不需要设置form的defaultbutton的属性了。
平时可能太大意,有些小问题居然都没有发现。我做一个不同的管理员进行管理时,有个dorpdownlist进行选择,就无法进行使用回车键进行登录;如图: 平时进行登录总是没有遇到这样情况,以为敲回车登录是一件很“天经地义”的事,可是这次我总是查了很多原因就是没有发现蛛丝马迹。不知道具体是什么原因。
程序的执行如上图一样,Page_Load执行之后就完了,没有继续执行。无奈之下,我将用户名改为TextBox 下图:
发现程序当我敲回车登录时,程序执行了Button的Click事件。
于是我产生疑问了:
1、难道一个页面必须要有两个TextBox?
2、如果页面再放一个TextBox,将TextBox隐藏是否可以?
3、放入Hidden控件不知是否可以?
带着这些疑问,我依次做了实验,发现TextBox隐藏、Hidden控件都是不行的!如下图:
我就看看form中是否可以设置一些东西,原来form中有DefaultButton属性,我将DefaultButton="ButtonLogin",页面上只有一个TextBox,发现敲回车居然执行了提交。其实在页面中已经生成这样的代码:
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ButtonLogin')"
我认为:DefaultButton的设置成为了下面的一段JS了。
<script type="text/javascript">
function WebForm_FireDefaultButton(event, target) {
if (event.keyCode == 13 && !(event.srcElement && (event.srcElement.tagName.toLowerCase() == "textarea"))) {
var defaultButton = document.getElementById(target);
if (defaultButton && typeof(defaultButton.click) != "undefined") {
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation) event.stopPropagation();
return false;
}
}
return true;
}
</script>
页面中如果有两个或者两个以上的TextBox就不需要设置form的defaultbutton的属性了。