當好在輸入框中輸入一些內容之后，如果想清除這些內容，可以直接點擊輸入框右側的小圓叉按鈕即可。
text
password
email
url
search
tel
number
datetime
使用方法
使用該重置input輸入框內容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件。
<link rel="stylesheet" ><link rel="stylesheet" ><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script type="text/javascript" src="js/jquery.bootstrap-pureClearButton.js"></script>
HTML結構
這個jQuery按鈕插件的HTML結構可以使用下面兩種格式中的任意一種。
<input type="text" data-pure-clear-button><input type="text" data-pure-clear-button="true">
初始化插件
在頁面加載完畢之后，可以使用下面的方法來初始化該插件。
$.pureClearButton.setDefault({ icon: 'glyphicon-plus'}); 方法
該jQuery插件有4個可用的方法：
.pureClearButtn('create')：在指定輸入框中創建一個清除/重置按鈕。
.pureClearButtn('destroy')：在指定輸入框中銷毀一個清除/重置按鈕。
.pureClearButtn('show')：在指定輸入框中顯示一個清除/重置按鈕。
.pureClearButtn('hide')：在指定輸入框中隱藏一個清除/重置按鈕。
下面再為大家進行擴展內容：Bootstrap輸入框
1、添加額外元素.input-group-addon
外包元素.input-group>input-group-addon+form-control
<div class="input-group"> <span class="input-group-addon">額外元素</span> <input type="text" class="form-control"/></div>
2、輸入框組尺寸
控制類.input-group-*: .input-group-lg/.input-group-sm
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1">額外元素</span> <input type="text" class="form-control"></div>
3、額外元素添加單選或多選
在額外元素中嵌套單選或多選按鈕元素
<div class="input-group"> <span class="input-group-addon"> <input type="radio" /> </span> <input type="text" class="form-control" /></div>
4、額外元素為按鈕
額外按鈕類.input-group-btn
<div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default">額外元素按鈕</button> </span> <input type="text"class="form-control" /></div>
5、額外元素為下拉按鈕菜單
.input-group-btn包含下拉按鈕菜單元素(包括觸發器和下拉菜單)
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">button <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" class="form-control" /></div>
6、額外元素為分裂式按鈕下拉菜單
額外元素包含分裂式按鈕下拉菜單(按鈕，觸發器和下拉菜單)
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle">button</button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" class="form-control" /></div>
以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
