jQuery Plugin To Create A Simple Calculator For Text Field - jCalculator

jCalculator is a lightweight jQuery plugin that creates a simple stylish calculator appending to a text field when clicked/focused on.

See also:

• jQuery Easy Calculator Plugin
• Responsive & Mobile-friendly jQuery Calculator Plugin
• jQuery Based Inline Calculator Inside Input Field - Calculadora

How to use it:

1. Add jQuery Javascript library and the jCalculator plugin at the bottom of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/jcalculator.js" type="text/javascript"></script> 

2. Create an input field on the document.

<input id="demo" type="text" placeholder="click her">

3. Initialize the plugin.

$(document).ready(function() {                       
$('#demo').calculator();
});

4. Add the following CSS snippets in your CSS file to style the calculator, or include the jcalculator.css directly into your page's head section.

.jcalculator_wrap { position: relative; }

.jcalculator {
  background: #232323;
  width: 200px;
  display: none;
  position: absolute;
  top: 82px;
  right: 0;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
}

.jcalculator span {
  cursor: pointer;
  color: #fff;
  float: left;
  display: block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

.jcalculator span:active { line-height: 52px; }

.jcalculator .operation { background: #191919; }

.jcalculator .operation.equal { background: #eb0934; }

---

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