如何方便的结果ajax使用html5的新type类型
程序员文章站
2022-05-18 23:16:17
今天需要做手机端的输入表单自动生成器,突然就想到了手机端对input的输入类型支持还不错,于是翻遍了资料,有了下面的使用方法,闲话少说,上正文: html5现在可以用的新input type类型一共有下面类型 =>
今天需要做手机端的输入表单自动生成器,突然就想到了手机端对input的输入类型支持还不错,于是翻遍了资料,有了下面的使用方法,闲话少说,上正文:
html5现在可以用的新input type类型一共有下面类型 =>
<input type="email" />
<input type="url" />
<input type="number" step="1" /> 这里number要结合step来实现是输入int类型还是number类型,如果是number,建议不加step属性
<input type="range" stop="1" />
<input type="color" />
<input type="search" /> 这个没什么用
<input type="date" /> 这个总共有6个选项:
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(utc 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
想要提示,经结合form来实现,如代码
<form id='form1' action="" method="post"> e-mail: <input type="email" id="tb_email" name="tb_email" /><br /> <input type="submit" /> </form>
这样如果没有填入正确的email就会出现提示
但是,我们不想用form提交啊,提交会刷新,会白屏,没办法上loading提示,我们想要用ajax
于是有了下面的解决方案
(以jquery的ajax举例)
<form id='form1' action="" method="post"> e-mail: <input type="email" id="tb_email" name="tb_email" /><br /> <input type="submit" /> </form> <script type="text/javascript"> document.getelementbyid("form1").onsubmit = function () { var postjson = { email: $("#tb_email").val() }; $.post("/your/url/",postjson,function(){ /*返回处理*/ }); return false; } </script>
在submit提交的时候拦截,即能用上新type类型的提示,又能用上ajax