创建自定义 html 输入答案

【问题标题】：Create custom html input创建自定义 html 输入
【发布时间】：2013-01-08 17:17:21
【问题描述】：

我想创建自己的 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>

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

【问题讨论】：

我认为有效的HTML 不允许这样做。但是，您可以添加 css class，并使用 jquery 附加事件和其他数据。
改用data-controlname="numberInput" 或类。然后，如前所述，使用 jQuery 查找元素并添加增强功能。
@TryingToImprove 好的，你能给我举一个简单的例子吗？我对 html\javascript\jQuery 很陌生。谢谢

标签： javascript jquery html ajax input

【解决方案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);
  });
});

...例如。

【讨论】：

【解决方案2】：

最好的方法是向输入添加一个类并给它们一个普通的type（如“文本”）。然后，您可以使用 JavaScript 将行为添加到它。

示例（使用 jQuery）：

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

【讨论】：

【解决方案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 的样式

【讨论】：

当你可以只使用getElementsByClassName和addEventListener时，我认为添加整个框架不是一个好主意
问题被标记为jquery