Create custom html input

Question

I want to create my own html numeric input and reuse it in my html page.
Declare something like that for example:

<input controlname="numberInput" type="text" onkeydown="return ValidateNumber(event);" onblur="ReturnToDefaultValue(this);" value="0"/>  

and then reuse it in the following:

<div>
    <input type="numberInput" id="number1" />
    <input type="numberInput" id="number2" /> 
    <input type="numberInput" id="number3" /> 
</div>  

Can someone offer something please?
Thanks

Answer 1

Give your inputs a class.

<input type="number" class="special_input">

Then add the appropriate jQuery.

$(function() {
  $("input.special_input").keydown(function(event) {
    return validateNumber(event);
  });
  $("input.special_input").blur(function(event) {
    returnToDefaultValue(this);
  });
});

...for example.

Answer 2

The best way would be to just add a class to the inputs and give them a normal type (like "text"). Then you can add the behaviour to it using JavaScript.

Example (using jQuery):

 $('.numberInput')
   .on('blur', returnToDefaultValue)
   .on('keydown', function(e) { validateNumber(e);}); 

Answer 3

Add jquery to your page <script src="jquery.js" /> Then paste you HTML, and add a script tag like this:

<script>
    $(function(){
        $(".controlNumber")
        .blur(function(e){ 
            ///blur stuff
        })
        .keydown(function(e) {
            //keydown stuff
        });
</script>

You input should then have a class named controlNumber

<input type="text" class="controlNumber" />

Using class also give you a easy way to style all the controlNumber 's