Bootstrap 實現輸入框中的 x 按鈕刪除文字值
阿新 • • 發佈:2019-01-05
bootstrap 的 form-control提供了一個 form-control-feedback類,用於在輸入框中顯示一個狀態,下面的地址有例項:
http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp
如果有多個輸入框,那麼最好用 div 包裹要載入×號的輸入框以及其 lable 標籤和 span 或者 a 標籤(用於顯示×號);
<div class="has-feedback">
<label class="text-info" for="addressId">輸入地址</label >
<input class="form-control"id="addressId" name="address">
<!--刪除按鈕-->
<a class="glyphicon glyphicon-remove btn form-control-feedback"style="pointer-events: auto"></a>
</div>
新增×號後發現不能點選,檢視 bootstrap 原始碼後發現設定了 pointer-events:none(元素永遠不會成為滑鼠事件的target)。所以在 a 標籤中 設定行內樣式覆蓋它,這樣×號就可以點選了
新增 jquery 功能實現
<script type="text/javascript">
$(function () {
$('a').click(function () {
$('input')[0].value = "";
})
})
</script>