欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何方便的结果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就会出现提示

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

 

但是,我们不想用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 如何方便的结果ajax使用html5的新type类型