<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.item {
width: 250px;
}
</style>
</head>
<body>
<form action="/regist" target="_blank" id="form">
<div class="item">
<label for="">同户名:
<input type="text" name="username" id="username" value="">
</label>
</div>
<div class="item">
<label for="">密码:
<input type="text" name="search" id="search" value="">
</label>
</div>
<div class="item">介绍:
<textarea name="" id="des" cols="30" rows="10"></textarea>
<p align="right">当前输入了 <strong id="count">0</strong>个字</p>
</div>
<div class="item">
<input type="submit" id="submit">
<input type="reset" id="reset">
</div>
</form>
<script>
function $(id) {
return document.getElementById(id)
}
// 获取相关的元素
var form = $("form");
var uName = $("username");
var search = $("search");
var des = $("des");
var count = $("count");
var submit = $("submit");
// onfocus 获取焦点
uName.onfocus = function () {
console.log("获取焦点");
this.style.backgroundColor = "#e3e3e3"
}
// onblue 失去焦点
uName.onblur = function () {
console.log("失去焦点...");
}
// onchange 数据发生改变
search.onchange = function () {
console.log("数据发生改变了");
}
// oninput 正在输入
des.oninput = function () {
count.innerHTML = this.value.length
}
// submit 和 reset 两个按钮不能触发
// 对应的 onsubmit 和 onreset 事件
// submit.onsubmit = function(){
// console.log("提交成功了");
// }
// onsubmit 和 onreset 事件 只能通过 form 这个标签改变
form.onsubmit = function(){
console.log("提交成功..");
}
</script>
</body>
</html>
js 表单事件
最新推荐文章于 2023-05-15 19:36:36 发布