創建自定義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輸入

回答

相關問題