创建自定义html输入

Create custom html input

本文关键字：输入 html 自定义 创建      更新时间：2023-09-26

我想创建自己的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>
谁能给我点什么?
由于

给你的输入一个类。

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

…例如,

最好的方法是为输入添加一个类，并给它们一个正常的type(如"text")。然后你就可以用JavaScript给它添加行为了。

示例(使用jQuery):

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

添加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" />

使用class也给你一个简单的方法来样式所有的controlNumber

相关文章：