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

注意：本例子的樣式基于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>

注：button外的div樣式為input_clear樣式。
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>

3.圖1和圖2，分別為輸入框效果圖和點擊輸入框效果后：

總結

以上是生活随笔為你收集整理的如何实现input输入框自带清除按钮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。