</pre><pre name="code" class="plain">
下面是我用jQuery EasyUI 1.4的TextBox组件写的登录源码,遇到的主要问题是在提交表单时TextBox组件获取组件内值的延迟问题?
<div id="top_loginDialog" class="easyui-dialog" data-options="title:'系统登录',modal:true,closable:false,iconCls:'icon-lock-open'">
<span style="white-space:pre"> </span><form id="top_loginForm" method="post">
<span style="white-space:pre"> </span><div class="easyui-panel" style="width:400px;padding:30px 70px 20px 70px;border: 0px;">
<span style="white-space:pre"> </span><div style="margin-bottom:10px">
<span style="white-space:pre"> </span><input class="easyui-textbox" name="user.loginName" <span style="white-space:pre"> </span>style="width:100%;height:40px;padding:12px" <span style="white-space:pre"> </span>data-options="required:true,missingMessage:'请输入登录名',prompt:'登录名...',iconCls:'icon-man',iconWidth:38">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" type="password" name="user.pwd" <span style="white-space:pre"> </span>style="width:100%;height:40px;padding:12px" <span style="white-space:pre"> </span>data-options="required:true,missingMessage:'请输入密码',prompt:'密码...',iconCls:'icon-lock',iconWidth:38">
</div>
<!-- 记住密码功能
<div style="margin-bottom:20px">
<input type="checkbox" checked="checked" />
<span style="white-space:pre"> </span><span>记住密码</span>
</div>
-->
<div style="margin-bottom:20px">
<span style="white-space:pre"> </span><a href="#" onclick="javascript:login();" class="easyui-linkbutton" data-options="iconCls:'icon-ok'" <span style="white-space:pre"> </span>style="padding:5px 0px;width:100%;"> <span style="white-space:pre"> </span><span style="font-size:14px;">登录</span> <span style="white-space:pre"> </span></a> </div>
<span style="white-space:pre"> </span><div>
<span style="white-space:pre"> </span><a href="#" onclick="javascript:$('#top_regDialog').dialog('open');" class="easyui-linkbutton" <span style="white-space:pre"> </span>data-options="iconCls:'icon-add'" style="padding:5px 0px;width:100%;"> <span style="white-space:pre"> </span><span style="font-size:14px;">注册</span> <span style="white-space:pre"> </span></a> </div>
</div>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#top_loginForm input').bind('keyup', function(event) { /*增加回车提交功能*/
if (event.keyCode == '13') login();
});
});
function login() {
<span style="white-space:pre"> </span>if ($("#top_loginForm").form('validate')) {
$.ajax({
<span style="white-space:pre"> </span>url : '${pageContext.request.contextPath}/UserAction!login.action',
data : $("#top_loginForm").serialize(),
dataType : 'json',
success : function(obj, textStatus, jqXHR) {
if (obj.success) {
$('#top_loginForm input').val('');
$('#top_loginDialog').dialog('close');
}
$.messager.show({
<span style="white-space:pre"> </span>title:'登录结果',
msg:obj.msg,
timeout:3000,
showType:'show'
});
}
});
}
}
</script></pre><pre name="code" class="plain">
基本流程:
1、请求类型:jQuery EasyUI 1.4的ajax提交。
2、提交方法:login()方法。
3、点击响应按钮:点击“登录”。
4、绑定事件提交:input组件响应键盘"Enter"键提交表单,绑定事件如源码
$(function() {
$('#top_loginForm input').bind('keyup', function(event) { /*增加回车提交功能*/
if (event.keyCode == '13') login();
});
});
问题:
把光标点入“登录名”输入框,输完登录名后点击回车,这是光标停在”密码“输入框,输完密码再点击回车,网页进行了表单提交,只不过表单提交到后台的密码是”密码“输入框在获取光标之前的值,(前提登录名和密码输入的都是正确的)网页会提示密码错误
。这个时候什么都不用修改,点击登录按钮就能登陆成功,或者是把光标再次选中”密码“输入框,做失去焦点和获取焦点动作,大概需要1~2次,如果光标选中的是输入框,这时再按下回车键前台的表单就能把正确的数据提交给服务器,网页这时提示登陆成功。
</pre><pre name="code" class="plain">期待你们的答复,谢谢。。。
本文详细介绍了在使用jQueryEasyUI1.4的TextBox组件进行登录表单开发时遇到的回车提交延迟问题,并提供了解决方案,通过事件绑定实现了正确地获取输入框内的数据并提交给服务器。
1418

被折叠的 条评论
为什么被折叠?



