创建自定义HTML输入

我要创造我自己的HTML数字输入，在我的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>

有人能提供的东西吗？
感谢

来源

2013-01-08 liorafar

我不认为这是允许的有效'HTML'。然而，你可以添加一个'css类'，并使用'jquery'来附加事件和其他数据。 – TryingToImprove

改为使用'data-controlname =“numberInput”'或类。然后，如前所述，jQuery可以找到元素并添加增强功能。 –

@TryingToImprove好非常大，所以你能指出我如何做一个简单的例子吗？我对html \ javascript \ jQuery非常陌生。谢谢 – liorafar

添加的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的

来源

2013-01-08 17:27:26 TryingToImprove

我不认为这是一个好主意，添加时，你可以使用'getElementsByClassName'和'addEventListener' –

问题被标记的整个框架'jquery' – TryingToImprove

给你输入一个类。

<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); 
    }); 
});

...例如。

来源

2013-01-08 17:24:24

，最好的办法是只添加一个类的投入，并给他们一个正常的type（如“文本”）。然后，您可以使用JavaScript将行为添加到它。

例（使用jQuery）：

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

来源

2013-01-08 17:26:31 Marco

比我的回答更好的JS。 –

创建自定义HTML输入

回答

相关问题