js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus=“autofocus” & onchange 事件会在域的内容改变时发生
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>js——input获取焦点和失去焦点</h2>
<h4>onfocus-获取焦点 ; onblur-失去焦点</h4>
<!-- onfocus获取焦点 ; onblur 失去焦点 -->
<!-- input输入框自动获取焦点,只要在该input标签后添加autofocus="autofocus"即可 -->
<!-- 案例一 -->
<h3>案例一</h3>
<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}">
<!-- 案例二 -->
<h3>案例二</h3>
用户名:<input type="text" id="username" name="username" autofocus="autofocus" /><br />
密码:<input type="text" id="password" name="password" /><br />
<input type="submit" name="submitBtn" value="提交" />
<!-- 案例三 -->
<h3>案例三</h3>
<input type="text" value="手机" id="int">
<script>
var int = document.getElementById("int");
int.onblur = function () {
int.value = "手机";
}
int.onfocus = function () {
int.value = "";
}
</script>
<!-- 案例四 -->
<!-- chang()和onfocus()、onblur()用法都类似 -->
<!-- onchange 事件会在域的内容改变时发生。 onchange 事件也可用于单选框与复选框改变后触发的事件。 -->
<h3>案例四</h3>
输入您的姓名: <input type="text" id="fname" onchange="upperCase(this.id)" />
<script type="text/javascript">
function upperCase(x) {
var y = document.getElementById(x).valuedocument.getElementById(x).value = y.toUpperCase()
}
</script>
</body>
</html>
效果