WEB(三)_HTML5中Input 属性介绍

本文就不对text和password进行介绍

<input type='search'>  //表示搜索框

<input type='number'>  //表示数字类型输入框

<input type='range'>  //表示范围选择滑块

<input type='color'>  //表示颜色选择器

<input type='tel'>  //表示电话号码输入框

<input type='url'>  //表示网址输入框

<input type='email'>  //表示email地址输入框

<input type='date'>  //表示日期选择器

<input type='month'>  //表示月份输入框

<input type='week'>  //表示星期输入框

<input type='time'>  //表示时间戳输入框

<input type='datetime'>  //表示精确日期/时间戳输入框

<input type='datetime-local'>  //表示当地日期和时间输入框

如果浏览器不支持type属性，会默认text，这点是我们判断的有利线索

我们来自己创建一个DOM对象

function isType(){
    var obj=document.createElement("input");
    obj.setAttribute("type","color");
    return obj.type!=="text";
}
//如果对!==不理解的可以自行百度，可以从搜索===来学习!==的意思

-------------------------------下面介绍占位符placeholder的介绍和判断-----------------------------------

<input type='text' placeholder='请输入邮箱/手机号/账号'>

//判断浏览器是否支持
function isPlaceholder(){
    var obj=document.createElement('input');
    return 'placeholder' in obj;
}
//obj是input对象，obj可以继承或获得input带的所有属性，它们以数组的形式放置。
//i in obj是for in的变形，在java中是for(;;;)但js有for(var i in obj)的使用方法，为什么可以怎么写，请百度
//js for in

用上面的placeholder例子就可以推断自动对焦autofocus的用法和判定了

<input autofocus='autofocus'>
<!--
    也可以是autofocus="1"  带数字的
    <input autofocus='1'>
    <input autofocus='2'>
    <input autofocus='3'>
    用tab建就能一次切换，焦点，按低到高进行的
-->

作者：五谷子（wuguzi）

转载于:https://my.oschina.net/wuguzi/blog/392643