HTML DOM Input Email对象(Input Email Object)

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

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

注:Safari、IE9及之前浏览器不支持type="email"类型的input元素

如何访问Input Email对象?

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

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

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

如何创建Input Email对象

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

var x = document.createElement("input");
x.setAttribute("type", "email");
Input Email对象的属性
属性 说明
autocomplete 设置或返回type="email"的input元素的autocomplete属性的值
autofocus【5】 设置或返回页面下载完毕后,是否自动聚焦到type="email"的input元素上
defaultValue 设置或返回type="email"的input元素的默认值
disabled 设置或返回type="email"的input元素是否被禁用
form 返回包含type="email"的input元素的form引用
maxLength 设置或返回type="email"的input元素的maxlength属性的值
multiple 设置或返回type="email"的input元素内是否允许用户输入多个邮件地址
list 返回包含type="email"的input元素的datalist的引用
name 设置或返回type="email"的input元素的name属性值
pattern 设置或返回type="email"的input元素的pattern属性值
placeholder 设置或返回type="email"的input元素的placeholder属性值
readOnly 设置或返回type="email"的input元素的内容是否只读
required 设置或返回type="email"的input元素的内容是否必须填写
size 设置或返回type="email"的input元素的size属性的值
step 设置或返回type="email"的input元素的step属性的值
type 设置或返回form元素中的type="email"元素是什么类型
value 设置或返回type="email"的input元素的value属性值

标准属性及事件

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

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

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

E-mail: <input type="email" id="myEmail" value="webkkl@example.com">

<p>点击以下按钮,获取Email类型的input元素的内容</p>

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

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

<script>

function myFc() {

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

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

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

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

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

<script>

function myFc() {

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

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

x.setAttribute("value", "webkkl@example.com");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容