實現輸入框自帶清除按鈕
阿新 • • 發佈:2018-12-31
最近,專案中需要,在輸入框獲取焦點是動態顯示“×”圖示。即在輸入框中輸入內容時,右邊顯示“×”按鈕;輸入框為空時,“×”按鈕消失。難點在於獲取焦點的同時,獲取輸入內容。
注意:本例子的樣式基於bootstrap.css和jquery,不再單獨新增樣式。
1.html部分,將button和input框放入同一個div中,清除按鈕可以使用圖片或fonts圖示,我使用的是bootstrap中button樣式,具體位置可自行微調;
注:button外的div樣式為input_clear樣式。<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程式碼
3.圖1和圖2,分別為輸入框效果圖和點選輸入框效果後:<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