KoolNumericTextBox provides great user experience
If we want to use buttons to increase/decrease number we can use turn on the spin button by setting $ShowSpinButton to true.
Furthermore, we can determine the position of Spin Buttons whether on the right or on the left of textbox by using $SpinButtonPosition:
- 1. $txtNum->SpinButtonPosition = "Right"; // Show spin button on the right. This is default setting.
- 2. $txtNum->SpinButtonPosition = "Left"; // Show spin button on the left.
Besides, we can use the keyboard or mouse wheel to increase/decrase value of textbox:
- 1. $txtNum->IncrementSettings->InterceptArrowKeys = true; // Use up/down arrow keys to increase/decrease.
- 2. $txtNum1->IncrementSettings->InterceptMouseWheel = true; // Use mouse wheel to increase/decrease.
With KoolNumericTextBox, you can format the display of number as you wish. Below are key settings:
- 1. $txtNum->NumberFormat->DecimalDigits = 2; //Number of decimal digits
- 1. $txtNum->NumberFormat->DecimalSeparator = "."; //Charater used to separate decimals
- 1. $txtNum->NumberFormat->GroupSeparator = " "; //Character used to seperate group in the number
- 1. $txtNum->NumberFormat->GroupSize = 2; //Number of digits in a group.
- 1. $txtNum->NumberFormat->NegativePattern = 2; //This pattern will be used if number is negative.
- 1. $txtNum->NumberFormat->PositivePattern = 2; //This pattern will be used if number is positive.
span style="color: #ff0000;">"/KoolAjax/koolajax.php""/KoolForm/koolform.php""myform""/KoolForm""sunset""txtNum1""n %""(n %)""txtEmptyMessage""txtEmptyMessage"]:"Percentage""checkKeyboard"]=="false""checkMouseWheel"]=="false""checkShowSpin"]=="false""selectSpinButtonPosition""selectSpinButtonPosition"]:"Right""txtNum2""selectDecimalDigits""selectDecimalDigits""selectDecimalSeparator""selectDecimalSeparator"]:".""selectGroupSeparator""selectGroupSeparator"]:" ""selectGroupSize""selectGroupSize""selectNegativePattern""selectNegativePattern"]:"$ -n""selectPositivePattern""selectPositivePattern"]:"$ n";
//Init form
"myform" method="post""decoration""width:350px;padding-left:10px;padding-bottom:10px;""updatepanel_general_setting""height:25px;">
<input id="txtEmptyMessage" type="text" value="Percentage"/>
<input id"btnSet" type="button" value="Set" onclick="update_general_setting()" />
</td>
</tr>
<tr>
<td style="height:25px;""checkKeyboard" type="checkbox" checked onclick="update_general_setting()"/>
</td>
</tr>
<tr>
<td style="height:25px;">Mousewheel increment:</td>
<td>
<input id="checkMouseWheel" type="checkbox" checked onclick="update_general_setting()"/>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;""checkShowSpin" type="checkbox" checked onchange="update_general_setting()"/>
</td>
</tr>
<tr>
<td style="height:25px;""selectSpinButtonPosition" onchange="update_general_setting()">
<option value="Left">Left</option>
<option value="Right" selected>Right</option>
</select>
</td>
</tr>
</table>
</fieldset>
<br/>
<fieldset style="width:350px;padding-left:10px;padding-bottom:10px;margin-top:10px;""updatepanel_numeric_setting""height:25px;width:150px;">DecimalDigits:</td>
<td>
<select id="selectDecimalDigits" style="width:100px;" onchange="update_numeric_setting()">
<option value="0">0</option>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;">DecimalSeparator:</td>
<td>
<select id="selectDecimalSeparator" style="width:100px;" onchange="update_numeric_setting()">
<option value=".">.</option>
<option value=",">,</option>
</select>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;">GroupSeparator:</td>
<td>
<select id="selectGroupSeparator" style="width:100px;" onchange="update_numeric_setting()">
<option value=" ">' '</option>
<option value=",">,</option>
</select>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;">GroupSize:</td>
<td>
<select id="selectGroupSize" style="width:100px;" onchange="update_numeric_setting()">
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;">NegativePattern:</td>
<td>
<select id="selectNegativePattern" style="width:100px;" onchange="update_numeric_setting()">
<option value="$ -n">$ -n</option>
<option value="BGN -n">BGN -n</option>
<option value="-n JPY">-n JPY</option>
<option value="-n km">-n km</option>
<option value="n- kg">n- kg</option>
<option value="-n %">-n %</option>
</select>
</td>
</tr>
<tr>
<td style="height:25px;width:150px;""selectPositivePattern" style="width:100px;" onchange="update_numeric_setting()">
<option value="$ n">$ n</option>
<option value="BGN n">BGN n</option>
<option value="n JPY">n JPY</option>
<option value="n km">n km</option>
<option value="n kg">n kg</option>
<option value="n %">n %</option>
</select>
</td>
</tr>
</table>
</fieldset>
<script type="text/javascript""OnUpdatePanel""txtEmptyMessage""txtEmptyMessage""checkKeyboard""checkKeyboard""checkMouseWheel""checkMouseWheel""checkShowSpin""checkShowSpin""selectSpinButtonPosition""selectSpinButtonPosition""selectSpinButtonPosition""OnUpdatePanel""selectDecimalDigits""selectDecimalDigits""selectDecimalDigits""selectDecimalSeparator""selectDecimalSeparator""selectDecimalSeparator""selectGroupSeparator""selectGroupSeparator""selectGroupSeparator""selectGroupSize""selectGroupSize""selectGroupSize""selectNegativePattern""selectNegativePattern""selectNegativePattern""selectPositivePattern""selectPositivePattern""selectPositivePattern"