SpinEditControl v0.8

Transform your input text control into a spin edit control (aka up-down | numeric edit control). -->

Features

• Fully JavaScript (i.e. compatible with any server-side language [use free sofware!!])
• Automatic input control conversion with a single attribute in the input tag, or using a special id attribute.
• Keyboard and mouse user interfase.
• GPL License.

Use

At the head section of your page, add two following lines:

<script type="text/javascript" src="spineditcontrol.js"></script>
<link type="text/css" rel="stylesheet" href="spineditcontrol.css">

Now, you have two options, according if is important for you complaint with XHTML:

Use pseudo-attribute "spinedit" (not XHTML complaint)

You need to add some attributes to your input text tag code, as following example:

<input type="text" name="edit1" id="edit1" spinedit="true" spinedit_min="minval" spinedit_max="maxval" spinedit_step="stepval">

Where minval, maxval and stepval are numbers to indicate the range and and step values. For example:

<input type="text" name="edit1" id="edit1" spinedit="true" spinedit_min="0" spinedit_max="100" spinedit_step="2">

In previous example, the SpinEditControl range is [0..100] with increment value of 2. If you don't specify step value, default is 1.

Use a specially formatted "id" attribute

You need to use an id attribute with following characteristics: A prefix CEC_ + any name + minval + _ + maxval + _ + stepval. For example, if you want to idicate a range from 0 to 100, with a step value of 2, you need an id attribute as following:

<input type "text" name="edit1" id="SEC_edit1_0_100_2">

Again, if you don't specify step value, 1 is assumed.

Example

Now, you cannot write other symbols than numbers. If you write a number out of range, the min or max value is assigned. Use up and down arrow keys or spin buttons to increase/decrease the value.

Notes

• If you're going to use this library, please send me an e-mail, and would be great if you include a photo of your city :) (se habla español)
• SpinEditControl works in *real* browsers (i.e. Mozilla family). I don't known about IE.
• You can modify the spin buttons style with the CSS file spineditcontrol.css.

Bugs

• Some invalid characters are allowed to type (but discarted when the value is assiged).
• I don't like the spin button's look (too big I think)... but is enough at this moment :-)

Download

Version history:

• Version 0.8.0 : Initial release.

Here's a tgz file with complete code and examples.

Author

By Hugo Ortega-Hernández - hugorteg{drop-this-text}@gmail.com

You can support free software! Consider that there are non-free similar projects, with less features and higher costs... so, if you donate some money, you can contribute to develop more quality free software: