您的位置：首页 > Web前端 > JQuery

JQ 搜索框获得焦点，和是失去焦点，默认提示显示与消失

2016-11-16 15:13 302 查看
<style type="text/css">

 *{

  margin:0;

  padding: 0;

 }

#search{
width: 228px;
height: 22px;
background:pink; 
margin:100px auto; 

}

#search input{
width: 192px;
height: 22px;
background:url(img/1.png) no-repeat; 
border: 0 none;
outline: none;
padding-left: 8px;
color: #ccc;

}

#search button{
width: 28px;
height: 22px;
float: right;
background:url(img/3.png); 
border: 0 none;
padding: 0;

}

 </style>

</head>

 <body>

 <div id="search">

<input id="ii" type="text" value="请输入。。。" /><button></button>

 </div>

 <script type="text/javascript">

  $(function(){

  $("#ii").focus(function(){

  if($(this).val() =="请输入。。。" ){

  $(this).val("");

  $(this).css("color","#000");

  }

  });

  $("#ii").blur(function(){

  if($(this).val() =="" ){

  $(this).val("请输入。。。");

  $(this).css("color","#ccc");

  }

  });

  })

 </script>

 </body>

 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航