当前位置: 代码迷 >> JavaScript >> .focus 有关问题,textbox focus 图片才显示
  详细解决方案

.focus 有关问题,textbox focus 图片才显示

热度:544   发布时间:2013-04-09 16:45:09.0
.focus 问题,textbox focus 图片才显示


希望textbox focus时,那个叉才显示


<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  
  
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
    * {
    font-family: Segoe UI;
    font-site: 9pt;
}

#search {
    padding: 3px 24px 3px 3px;
}

#clear {
    text-indent: -1000em;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(http://p.yusukekamiyamane.com/icons/search/fugue/icons/cross.png);
    background-repeat: no-repeat;
    position: relative;
    left: -20px;
    top: 3px;
}

  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$("#clear").click(function(evt){
    evt.preventDefault();
    $("#search").val("").focus();
});
});//]]>  

</script>


</head>
<body>
  <input type="text" name="search" id="search" value="I can be cleared" /><a href="search/clear" id="clear"></a>

  
</body>


</html>


------解决方案--------------------
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#clear").click(function(evt){
    evt.preventDefault();
    $("#search").val("").focus();
});
$('#search').focus(function(){
    $("#clear").show();
}).blur(function(){
    $("#clear").hide();
})
});//]]>  
 
</script>
  相关解决方案