Assign Action Buttons To Any Elements - jQuery Default Button

File Size: 8.44 KB
Views Total: 172
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Assign Action Buttons To Any Elements - jQuery Default Button

Default Button is a small jQuery plugin that lets you assign a button to an element you specify, which will be clicked when you press Enter key inside that element.

Can be useful for submitting an HTML form after pressing ENTER kery at any of the text inputs.

How to use it:

1. Download and load the minified version of the default button plugin after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery-default-button.min.js"></script>

2. Assign buttons to your elements as follows:

<!-- Element 1 -->
<div id="Div1">
  Pressing enter in either of these textboxes will press Button1.<br />
  <input type="text"/>
  <input type="text"/>
</div>

<!-- Element 2 -->
<div id="Div2">
  Pressing enter in either of these textboxes will press Button2.<br />
  <input type="text"/>
  <input type="text"/>
</div>

<!-- Button 1 -->
<input type="button" id="Button1" value="Button1" />

<!-- Button 2 -->
<input type="button" id="Button2" value="Button2" />

3. Initialize the default button plugin and done.

$(document).ready(function(){

  // Button 1
  $("#Div1").defaultButton("#Button1");

  // Button 2
  $("#Div2").defaultButton("#Button2");

  // for test purpose
  $("input[type=button]").on("click", function(){
    alert("You pressed " + $(this).attr("id"));
  });
  
});

This awesome jQuery plugin is developed by roncli. For more Advanced Usages, please check the demo page or visit the official website.