当前位置: 萬仟网 > IT编程>网页制作>Html5 > 如何方便的结果ajax使用html5的新type类型

如何方便的结果ajax使用html5的新type类型

16  人参与 | 时间:2019-03-14 | 我要评论

今天需要做手机端的输入表单自动生成器,突然就想到了手机端对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 

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com