html5中input新增type值的使用
二狗在最近的项目以html5和webapp为主,并接触到了input新增type值的使用,下面就把这些玩意一一以实例列举出来
一:type = date:定义日期:年-月-日
input type="date"可以获取年月日的值,也可以给它的value设置自定义的值哦。
注意:如果你想给input设置你自定义的value值,自定义的值的格式 一定要和input type=date的格式 一样才行。
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery.js"></script>
</head> <body>
定义日期字段
<input type="date" id="myDate"/>
</body>
<script>
$(document).ready(function(){
var date = new Date();
var myDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
//这里的myDate的格式一定要是"year-month-day"
console.log(myDate);
$("#myDate").val(myDate); //将当前日期赋值给input
$("#myDate").change(function(){ //这个函数我是为了将input的结果输出来
var val = $("#myDate").val();
console.log(val); })
}) </script>
</html>
二:一:type = time:定义时间:时:分
<!doctype html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="js/jquery.js"></script>
</head> <body> <br />
定义日期字段的时、分、秒(带有 time 控件)
<input type="time" id="myTime"/>
</body>
<script>
$(document).ready(function(){
var date = new Date();
var myTime = date.getHours() + ":" + (date.getMinutes());
//这里的myTime 的"格式一定要是 hours:minutes"
console.log(myTime);
$("#myTime").val(myTime);
$("#myTime").change(function(){
var val = $("#myTime").val();
console.log(val); })
}) </script>
</html>
html5中input新增type值的使用的更多相关文章
- html5中input的type类型有哪些(总结)
html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...
- Html5中input新增的表单元素和属性介绍。
input标签主要用于Web表单的创建交互,以便接受来自用户的数据. 我们通过更改type属性的值,来实现不同的输入类型.在以前的写法中表单元素必须放在form元素所包含的里面,而在html5中,我们 ...
- HTML5中input新增类型+表单新增属性+其他标签属性
@ (猴头) Input 新增属性 email 邮箱(只在手机端有效) url 网址(只在iphone手机有效) tel 手机号(只在手机端有效) number 数字(右侧有上下按钮,只能输入 ...
- HTML5中input[type='date']自定义样式
HTML5提供了日历控件功能,缩减了开发时间,但有时它的样式确实不如人意,我们可以根据下面的代码自行修改. 建议:复制下面的代码段,单独建立一个css文件,方便我们修改. /* 修改日历控件类型 */ ...
- 笔记:HTML5中input元素新增的type值
在HTML5中,input元素的type值增加了不少,使input的功能强大了很多. 但在各大浏览器中并不是所有的type值都支持. 以下是比较有用.并且浏览器支持的稍好一些的值: type=colo ...
- HTML5中input标签有用的新属性
HTML5对input增加了一些新标签,个人觉得比较常用有效的以下几个 placeholder=“请输入” 常见用于默认提示 autofocus 自动聚焦到当前输入框 maxlength=" ...
- Jquery中input:type=radio的监听,获取设置值
一.html <div id='demo'> <input type='radio' name='sex' value='男' > <input type='radio' ...
- 【HTML5】input元素type属性值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html5中 input的pattern属性 和 details/summary元素
html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...
随机推荐
- niop 2014寻找道路
/* 乍一看就是个最短路 SFPA 但是要保证路径上的所有点的出边所指向的点都直接或间接与终点连通. 这一点就蛋疼了0.0 开始想的是正着跑一边 每一个点的所有边都能符合条件 那这个点就符合条件0.0 ...
- PC端手机访问跳转手机站点
第一种: var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.sr ...
- 下载文档时Safari浏览器下载后出现".html"问题
下载代码是需要设置 Response.ContentType = "application/octet-stream", 不要设为application/x-msdownload, ...
- APP长时间处于后台,再次调用时提示用户重新登录
第一步:当应用被处于后台时,调用计时器的start()方法,开始计时 在所有Activity继承的BaseSwiBackAct中的 public void onStop() { EventBus.ge ...
- ASP.NET性能优化小结
一.返回多个数据集 检查你的访问数据库的代码,看是否存在着要返回多次的请求.每次往返降低了你的应用程序的每秒能够响应请求的次数.通过在单个数据库请求中返回多个结果集,可以减少与数据库通信的时间,使你的 ...
- FingerChaser(3) 解题报告目录
所有代码都不超过40行... A:http://www.cppblog.com/willing/archive/2010/05/04/114304.html B:http://www.cnblogs. ...
- 【COGS 56】质数取石子
[问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...
- 【USACO 1.4.2】时钟
[题目描述] 考虑将如此安排在一个 3 x 3 行列中的九个时钟: |-------| |-------| |-------| | | | | | | | |---O | |---O | | O | ...
- 关于USACO Training
做了这么久的题目,突然发现最经典的 USACO Training 还没有做过?加速水一遍吧!我会把题解放在上面的.
- UVA 10285 - Longest Run on a Snowboard (记忆化搜索+dp)
Longest Run on a Snowboard Input: standard input Output: standard output Time Limit: 5 seconds Memor ...