bootstrap表单禁止回车提交,disabled获取不到input

调试好一会才弄好的,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); # 添加
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值