After entering some content in the input box, if you want to clear these contents, you can directly click the small round fork button on the right side of the input box.
text
password
url
Search
tel
number
datetime
How to use
Use the reset input input input box content plugin to import jQuery and Bootstrap files as well as jquery.bootstrap-pureClearButton.js files.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"><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 structure
The HTML structure of this jQuery button plugin can be used in any of the following two formats.
<input type="text" data-pure-clear-button><input type="text" data-pure-clear-button="true">
Initialize the plugin
After the page is loaded, you can use the following method to initialize the plug-in.
$.pureClearButton.setDefault({ icon: 'glyphicon-plus'});method
The jQuery plugin has 4 methods available:
.pureClearButtn('create'): Create a clear/reset button in the specified input box.
.pureClearButtn('destroy'): Destroy a clear/reset button in the specified input box.
.pureClearButtn('show'): Displays a clear/reset button in the specified input box.
.pureClearButtn('hide'): Hide a clear/reset button in the specified input box.
The following is to expand the content for you: Bootstrap input box
1. Add extra elements.input-group-addon
Outsourcing elements.input-group>input-group-addon+form-control
<div> <span>Extra Elements</span> <input type="text"/></div>
2. Enter the box group size
Control class.input-group-*: .input-group-lg/.input-group-sm
<div> <span id="sizing-addon1">Extra elements</span> <input type="text"></div>
3. Add multiple choices or multiple choices for additional elements
Nesting a single or multi-select button element in extra elements
<div> <span> <input type="radio" /> </span> <input type="text" /></div>
4. Extra elements are buttons
Extra button class.input-group-btn
<div> <span> <button>Extra Element Button</button> </span> <input type="text"class="form-control" /></div>
5. The extra element is the drop-down button menu
.input-group-btn contains drop-down button menu elements (including triggers and drop-down menus)
<div> <div> <button data-toggle="dropdown">button <span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" /></div>
6. The extra element is split button drop-down menu
Extra elements include split button drop-down menus (buttons, triggers and drop-down menus)
<div> <div> <button>button</button> <button data-toggle="dropdown"><span></span></button> <ul> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div> <input type="text" /></div>
The above is all about this article, I hope it will be helpful to everyone's learning.