Download the javascript file: aeinput.js (uses the getElementsByClass function by Dustin Diaz)
Successfully tested on the latest versions of Firefox, Internet Explorer, Safari, and Opera.
Click and drag the input horizontally to increase or decrease the value. Click the input once, and a text input will appear where you can manually type in the value you desire. Press enter or click out of the input to submit the value, or press escape to cancel the value. When the text input is displayed, press the up arrow to increase the value by one, or press the down arrow to decrease the value by one.
The implementation is quite easy. Simply add class="aei" to a text input, and the javascript will automatically convert all text inputs with that clas name to an AE-like numerical input on the page load. If the browser does not support javascript, the input will remain the same, thus allowing deprecated browsers to fill out the input as well.
The above input uses the most basic code: <input type="text" class="aei" size="2" />
It usually helps to move the input away from the sides of your screen to allow for the cursor to travel substantial distances in both horizontal directions. The input parses the value for integers; if the value is NaN, it automatically resets to 0.
For css styling, class .aei will encompass the input, and class .aei_text will encompass the text. A 1px dotted blue underline is added to the text by default. It can be modified or removed by editing the following line 22 in the javascript file.
The following example uses styling, a preset value, a maximum restriction (max="integer"), a minimum restriction (min="integer"), and a javascript onchange event, for more practical purposes in APIs:
<input type="text" class="aei" size="2" value="1280" max="2000" min="1" onchange="document.getElementById('b').style.width = this.value / 2" />
<input type="text" class="aei" size="2" value="720" max="2000" min="1" onchange="document.getElementById('b').style.height = this.value / 2" />
Copyright ©2008 JPhantom.com