使用 oninput
事件可以实时获取html元素 input
或 textarea
中的值
- 演示截图
- 实例代码, 可以将横拉条的数值实时显示至html标签
p
中
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<label for="input">输入</label>
<input type="range" min="0" max="100" value="0" id="input">
<p id="output">0</p>
</form>
<script src="test.js"></script>
</body>
</html>
//test.js
document.getElementById("input").oninput = function() {
document.getElementById("output").innerText = this.value;
};
事件支持浏览器