html5中表单新增的事件及进度条

表单新增的事件

• oninput ：监听当前指定元素内容的改变，只要内容改变（添加元素、删除元素），就会触发这个事件。

document.getElementById("username").oninput = function(){
	console.log('oninput'+this.value);
}

---

• onkeyup:键盘弹起的时候触发：每一个键的弹起都会触发一次这个事件。

 document.getElementById("username").onkeyup = function () {
    console.log('onkeyup:'+this.value);
}

---

• oninvalid:当验证不通过时触发

 document.getElementById("username").oninvalid = function () {
    //设置默认的提示信息
    this.setCustomValidity('请输入正确的验证信息');
}

---

进度条标签

• 标签名：progress；属性值：max：最大值；min：最小值；value：默认值。

<progress max="100" min="0" value="80"></progress>

• 衡量器：衡量当前的进度值。标签名：meter；属性值：high：规定的较高的值；low：规定的较低的值；max：最大值；min：最小值；value：当前度量值。

<meter max="100" min="0" high="90" low="30" value="92"></meter>
<meter max="100" min="0" high="90" low="30" value="60"></meter>
<meter max="100" min="0" high="90" low="30" value="20"></meter>

---

结束微语：当手机只有10%，就需要不断充电。 当一年只剩10%，就需要更加努力。