JavaScript实现搜索框焦点交互与占位符效果详解

<style> 
 *{
  margin: 0;
  padding: 0;
 }
 input,button{
  border: 0 none;
  padding: 0;
  outline-style: none;
 }
 .search{
  margin: 100px auto;
  width: 258px;
  height: 40px;
  overflow: hidden;
 }
 .search input{
  float: left;
  width: 208px;
  height: 40px;
  background: url("left.jpg") no-repeat;
 
  padding-left:8px;
  color: #ccc;
 }
 .search button{
  float: left;
  height: 40px;
  width: 42px;
  background: url("right.jpg") no-repeat;
  cursor: pointer;
 } 
</style>
 
<body>
<div class="search">
 <input type="text" value="请输入..." id="txt"> //盒子架构div中一个文本框一个按钮
 <button id="btn"></button>
</div>
 
</body>

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   } //虽然该案例中这种获取id方式比较麻烦但这是通常的一种方法避免一直去写获取
   $id("txt").onfocus=function () {
    if (this.value=="请输入..."){
     this.value=""; //这边是赋值别搞错了
     this.style.color="#333"; //黑色
    }
   } //当用户点击时初始文字消失
   $id("txt").onblur=function () {
    if (this.value==""){
     this.value="请输入..."
     this.style.color="#ccc"; //透明灰
    } //谁调用this指向谁
   }//当为空时用户点击其他地方显示初始化状态
  $id("btn").onclick=function () {
   alert("我可以点击");
  } //这边只是试验一下按钮功能还在不在
  }
 </script>

.search label {
  font-size: 12px;
  color:#ccc;
  position: absolute; /*以绝对定位来定位label到文本框合适位置当然同时也要为父亲div盒子加上相对定位*/
  top:12px;
  left:12px;
  cursor: text; /*使鼠标放到lable文字上时还是光标*/
 }

<script>
  window.onload=function () {
   function $id(id) {
    return document.getElementById(id);
   }
   $id("txt").oninput=function () { //判断用户输入栏是否为空来使得label是否消失
 
    if (this.value==""){
     $id("lab").style.display="block";
    }
    else {
     $id("lab").style.display="none";
    }
   }
 
  }
 </script>