最近，專案中需要，在輸入框獲取焦點是動態顯示“×”圖示。即在輸入框中輸入內容時，右邊顯示“×”按鈕；輸入框為空時，“×”按鈕消失。難點在於獲取焦點的同時，獲取輸入內容。

注意：本例子的樣式基於bootstrap.css和jquery，不再單獨新增樣式。

1.html部分，將button和input框放入同一個div中，清除按鈕可以使用圖片或fonts圖示，我使用的是bootstrap中button樣式，具體位置可自行微調；

<div style="display:inline-block;position:relative;">  
             <div style="position:absolute;right:2px;top:-2px;cursor:pointer;display:none;" class="input_clear">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					×
		</button>
	     </div>  
             <input type="text" placeholder="請輸入" class="input-text w200 form-control" aria-describedby="basic-addon1" name="keyword" id="keyword" style="height:35px;" >  
        </div>
 

2.jquery程式碼

<script>
		$("input").focus(function(){  
    $(this).parent().children(".input_clear").show();  
});  
$("input").blur(function(){  
    if($(this).val()=='')  
    {  
        $(this).parent().children(".input_clear").hide();  
    }  
});  
$(".input_clear").click(function(){  
    $(this).parent().find('input').val('');  
    $(this).hide();  
}); 
        </script> 
 

參考部落格：http://blog.csdn.net/pinzhizun/article/details/54144253

                http://blog.csdn.net/dwc2011/article/details/51028944