应用场景：
1. 搜索框在页面中占据的空间过小，希望无论浏览到什么位置，可以轻易地回到并聚焦搜索框。
2. 搜索框里面的文字大小过小，希望能够在上方开辟一块空间放大内容
解决思路：
1. 对整个页面添加键盘事件keyup类型的侦听器，然后使用e.keyCode属性来获得用户按下的键，如果是s/S，就让搜索框聚焦。
2. 对搜索框添加键盘事件keyup类型的侦听器，将搜索框的value赋给放大内容盒子(我用的是<p>标签)的innerText，如果不为空，就将盒子通过style.display:block显示出来。
2补充. 刚刚只是实现了搜索框有内容的时候将其放大，但是当其失去焦点，即使有内容也不应放大，重新获得焦点时如果有内容就放大。
可玩味之处：两个键盘事件都得是keyup而不是keydown或者keypress
效果(请看官脑补动态效果)
代码(css写在style标签内，js写在script标签内)
<!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>事件进阶</title><style>div p {display: none;font-size: large;background-color: #FFFDE7;}</style>
</head>
<body><div><p>123</p><input type="text"><button>搜索</button></div></body>
<script>var search = document.querySelector('input');document.addEventListener('keyup',function(e){if(e.keyCode === 83||e.keyCode === 115){console.log("keyup:"+e.keyCode);search.focus();}})var magnify = search.previousElementSibling;console.log(magnify);search.addEventListener('keyup',function(e){magnify.innerText = search.value;if(magnify.innerText!=''){magnify.style.display = 'block';}else{magnify.style.display = 'none';}})search.addEventListener('blur',function(){magnify.style.display = 'none';})search.addEventListener('focus',function(){if(search.value!=''){magnify.style.display = 'block';}})</script>
</html>
