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

如何方便的结果ajax使用html5的新type类型的更多相关文章

  1. MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能. 基本功能:实现带有进度条的文件上传功 ...

  2. 浅谈HTML5的新特性

    2014年10月29日,W3C宣布,经过接近8年的艰苦努力,HTML5标准规范终于制定完成. HTML5将会取代1999年制定的HTML 4.01.XHTML 1.0标准,使网络标准达到符合当代的网络 ...

  3. 28个你必须知道的HTML5的新特性,技巧以及技术

    崭新新的页面布局 传统的: HTML5: 1. 新的Doctype 尽管使用<!DOCTYPE html>,即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元素 用<f ...

  4. 移除HTML5 input在type="number"时的上下小箭头

    /*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...

  5. HTML5部分新标签属性及DOM扩展元素

    HTML5定义了一系列新元素,如新语义标签.智能表单.多媒体标签等. 我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台. ...

  6. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  7. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  8. HTML5的新特性及技巧分享总结

    原文链接:http://www.aseoe.com/show-10-645-1.html?utm_source=tuicool&utm_medium=referral 1. 新的Doctype ...

  9. HTML5中的时间类型,另外EL表达式的时间值来读取时间,并且还可以更改时间

    HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式.所以,各浏览器根据自己的设计实现日历.目前只有谷歌浏览器完全实现日历功能.相信这种局面很快就会结束,所有的浏览器 ...

随机推荐

  1. JavaScript写九九乘法表

    <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+&qu ...

  2. C# Base64Helper

    public static class Base64Helper { /// <summary> /// base64字符保存图片到本 /// </summary> /// & ...

  3. mysql的日期函数介绍

    仅供参考 DAYOFWEEK(date)  返回日期date是星期几(1=星期天,2=星期一,……7=星期六,ODBC标准)mysql> select DAYOFWEEK('1998-02-03 ...

  4. leetcode题解之分解字符串域名

    1.题目描述 A website domain like "discuss.leetcode.com" consists of various subdomains. At the ...

  5. 《SQL Server 2008从入门到精通》--20180704

    XML查询技术 XML文档以一个纯文本的形式存在,主要用于数据存储.不但方便用户读取和使用,而且使修改和维护变得更容易. XML数据类型 XML是SQL Server中内置的数据类型,可用于SQL语句 ...

  6. iOS设计模式 - 生成器

    iOS设计模式 - 生成器 原理图 说明 1. 将构建复杂对象的过程拆分成一个一个的模块,通过统一的指导者来指导对象的构建过程称之为生成器模式 2. 生成器模式适合用于构建组合的对象 源码 https ...

  7. 转载:从程序员的角度看ASCII, GB2312, UNICODE, UTF-8

    以下内容转自博客:http://blog.chinaunix.net/uid-22670933-id-1771613.html. 一.字符编码是怎么回事 0. 概念 字节是计算机的最基本存储单位,一个 ...

  8. Django学习---抽屉热搜榜分析【all】

    Python实例---抽屉热搜榜前端代码分析 Python实例---抽屉后台框架分析 Python学习---抽屉框架分析[点赞功能分析] Python学习---抽屉框架分析[数据库设计分析]18031 ...

  9. Microsoft Teams 版本与语音落地介绍

    我亲爱的小伙伴们,失踪人口回归啦~~ 今天和大家聊的是Microsoft Teams,Teams作为协作的集大成者,可以实现skype for Business的所有功能,还可以在teams里集合Of ...

  10. BlockingQueue笔记

    Concurrent包中的BlockingQueue很好的解决了多线程中如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便利. 通过一个共享 ...