当前位置： 移动技术网 > IT编程>网页制作>Html5 > 如何方便的结果ajax使用html5的新type类型

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

2019年03月14日  | 移动技术网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网