知识点
- 两种添加事件的语法区别：事件名称是不一样的
input.onfocus = function (ev1) { this.style.width = '600px'; this.style.height = '200px'; this.style.outline = 'none'; this.style.fontSize = '50px'; }; input.addEventListener('focus',function (evt) { this.style.width = '600px'; this.style.height = '200px'; this.style.outline = 'none'; this.style.fontSize = '50px'; });
效果
初始效果
点击输入框，获得焦点
点击输入框外部，失去焦点
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<span>姓名</span>
<label>
<input type="text" placeholder="请输入姓名">
</label>
</div>
<script>
window.onload = function (ev) {
var input = document.getElementsByTagName('input')[0];
// 1. 获得焦点
input.onfocus = function (ev1) {
this.style.width = '600px';
this.style.height = '200px';
this.style.outline = 'none';
this.style.fontSize = '50px';
};
// 2. 失去焦点
input.addEventListener('blur',function (evt) {
this.style.border = '5px solid red';
this.style.color = 'yellow';
})
}
</script>
</body>
</html>
