创建自定义html输入

Question

我想创建自己的html数字输入并在我的html页面中重用它。
例如声明类似的东西：

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

然后在以下内容中重复使用它：

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

有人可以提供一些东西吗？
谢谢

Answer 1

给你的输入一个班级。

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

然后添加适当的jQuery。

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

...例如。

Answer 2

最好的方法是只在输入中添加一个类，并为它们提供一个普通type （如“text”）。 然后，您可以使用JavaScript向其添加行为。

示例（使用jQuery）：

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

Answer 3

将jquery添加到您的页面<script src="jquery.js" />然后粘贴HTML，并添加如下脚本标记：

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

您输入应该有一个名为controlNumber的类

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

使用类还可以为您提供一种简单的方法来设置所有controlNumber的样式