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>
效果
