调试好一会才弄好的,bootstrap页面上的小问题记录下。
1、表单禁止回车提交。
问题:做了一个弹出框的搜索页面,输入关键词不点击搜索按钮直接回车,结果离开了当前页面跳转了一个空白页面,搜索出来的数据也没了样式直接显示在空白页面上。
表单回车自动提交的情况如下
当form表单里面仅一个输入框,回车都会提交(无论按钮的type="submit"还是type="button"类型)。
当form表单里面有多个输入框,按钮的type=“submit”(没写type则默认为submit)会提交,type="button"时不会提交
解决方案:在input或form里面添加onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}"
13表示输入的是回车。
示例方案1:下面这个仅对这一个input回车不会自动提交,其他没加这个onkeydown的input回车时还是会自动提交。
<input type="text" name="name" value="王五" id="name" onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}"/>
示例方案2:在form表单里面添加(推荐,因为对form标签里面的全部input输入回车都不会自动提交)
<form action="user.do" method="post" οnkeydοwn="if(event.keyCode==13){return false;}">
2、disabled 属性导致获取不到表单里面的input值。
在bootstrap里面通过js设置input只读不可修改。如果使用的是disabled 不是readonly,会导致表单提交的时候, 通过var params = $("#formId").serialize();
获取表单参数时, 这个设置了disabled 属性的input的name和value都无法获取到了。当然通过$("#id").val();
是可以获取到的。
所以一般推荐禁用input使用readonly,禁用button按钮使用disabled。这次主要是不知道disabled会导致获取不到input所以才消耗了一些时间,若是早知道这个情况就不用去调试这么久了。
如果input一定要用disabled,那也是灵活的转一下的。这个思路就是先移除等你的功能效果达到之后再给他禁用上
function functionName() {
$("#yourIdName").removeAttr("disabled"); # 移除
// your code
$("#yourIdName").attr("disabled", true); # 添加
}