HTML DOM Input Week对象(Input Week Object)

Input Week对象代表了HTML文档中的type="week"类型的input元素

【5】Input Week对象是HTML5中新增加对象。

注:IE、Firefox浏览器不支持type="week"类型的input元素

如何访问Input Week对象?

使用getElementById()方法访问type="week"的input元素。

注:使用form元素的elements收集器也能够访问type="week"的input元素。

var  x = document.getElementById("myWeek");

如何创建Input Week对象

使用createElement()方法创建type="week"的input元素。

var x = document.createElement("input");
x.setAttribute("type", "week");
Input Week对象的属性
属性 说明
autocomplete 设置或返回type="week"的input元素的autocomplete属性的值
autofocus 设置或返回页面下载完毕后,是否自动聚焦到type="week"的input元素上
defaultValue 设置或返回type="week"的input元素的默认值
disabled 设置或返回type="week"的input元素是否被禁用
form 返回包含type="week"的input元素的form引用
max 设置或返回type="week"的input元素的max属性的值
min 设置或返回type="week"的input元素的min属性的值
list 返回包含type="week"的input元素的datalist的引用
name 设置或返回type="week"的input元素的name属性值
readOnly 设置或返回type="week"的input元素的内容是否只读
required 设置或返回type="week"的input元素的内容是否必须填写
step 设置或返回type="week"的input元素的step属性的值
type 设置或返回form元素中的type="week"元素是什么类型
value 设置或返回type="week"的input元素的value属性值
Input Week对象的方法
方法 说明
stepDown() 类型为week的input元素的值以指定的数值递减
stepup() 类型为week的input元素的值以指定的数值递增

标准属性及事件

Input Week对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问Week类型的input元素</h3>

<input type="week" id="myWeek" value="2014-W10">

<p>点击以下按钮,获取week类型的input元素的值</p>

<button onclick="myFc()">按钮</button>

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myWeek").value;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建Week类型的input元素</h3>

<p>点击以下按钮,创建week类型的input元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.createElement("INPUT");

x.setAttribute("type", "week");

x.setAttribute("value", "2000-W23");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容