1. 程式人生 > >Bootstrap 實現輸入框中的 x 按鈕刪除文字值

Bootstrap 實現輸入框中的 x 按鈕刪除文字值

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>