Bootstrap Reset Input Box content button Plugin _javascript tips

When you enter some content in the input box, if you want to clear the content, you can directly click on the right side of the input box to the small round fork button.

Text
Password
Email
Url
Search
Tel
Number
Datetime

How to use

Use this reset input input box content plugin to introduce 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

This jquery button plugin's HTML structure 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" >   

Initializing Plug-ins

After the page is loaded, you can use the following method to initialize the plug-in.

$.pureclearbutton.setdefault ({
 icon: ' Glyphicon-plus '
});   

Method

The jquery plug-in has 4 available methods:
. PURECLEARBUTTN (' Create '): creates a purge/reset button in the specified input box.
. PURECLEARBUTTN (' Destroy '): destroys a purge/reset button in the specified input box.
. PURECLEARBUTTN (' show '): displays a purge/reset button in the specified input box.
. PURECLEARBUTTN (' hide '): hides a purge/reset button in the specified input box.

Here's what you can expand on:Bootstrap input Box

1, add additional elements. Input-group-addon

Outsourcing elements. Input-group>input-group-addon+form-control

<div class= "Input-group" >
 <span class= "Input-group-addon" > Extra elements </span>
 <input type= " Text "class=" Form-control "/>
</div>

2, the input frame group size

Control class. input-group-*: Input-group-lg/.input-group-sm

<div class= "Input-group input-group-lg" >
 <span class= "Input-group-addon" id= "Sizing-addon1" > Extra elements </span>
 <input type= "text" class= "Form-control" >
</div>

3, additional elements to add a single election or multiple selection

Nested radio or multiple-selection button elements in extra elements

<div class= "Input-group" >
 <span class= "Input-group-addon" >
  <input type= "Radio"/>
 </span>
 <input type= "text" class= "Form-control"/>

4, the extra element is the button

Extra Button class. input-group-btn

<div class= "Input-group" >
 <span class= "input-group-btn" >
   <button class= "Btn Btn-default" > extra element button </button>
 </span>
 <input type= "text" class= "Form-control"/>
</div >

5, the additional elements for the Drop-down button menu

. input-group-btn contains Drop-down button menu elements (including triggers and Drop-down menus)

<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, the additional elements for the Split-button Drop-down menu

Extra elements include split-button Pull-down menus (buttons, triggers, and Pull-down menus)

<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>

The above is the entire content of this article, I hope to help you learn.