输入字段,只接受0到12之间的数字

Input field to accept only numbers from 0 to 12?

本文关键字:之间 数字 字段 输入      更新时间:2023-09-26

我想创建一个js代码,所以在输入字段(对于下面的HTML代码)中,我只能输入0到12之间的数字。但问题是输入已经有了id,所以…这是我的代码:HTML:

<!-- Months Textfield -->
        <form>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" input id="d" data-in="" type="text" pattern="-?[0-9]*('.[0-9]+)?" id="sample2" onchange="handleChange(this);">
            <label class="mdl-textfield__label" for="sample2">Months...</label>
            <span class="mdl-textfield__error">Please specify monthes in numbers not in letters !</span>
            <input id="e" input type="hidden" data-in="" value="2628002.88" type="text" />
            </div>
        </form>

JS:

// Get all your elements stores
var a = document.getElementById("a");
var b = document.getElementById("b");
var c = document.getElementById("c");
var d = document.getElementById("d");
var e = document.getElementById("e");
var f = document.getElementById("f");
var h = document.getElementById("h");
var i = document.getElementById("i");
var j = document.getElementById("j");
var astored = a.getAttribute("data-in");
var bstored = b.getAttribute("data-in");
var dstored = d.getAttribute("data-in");
var estored = e.getAttribute("data-in");
var hstored = h.getAttribute("data-in");
var istored = i.getAttribute("data-in");
function calculate(input1, input2, output) {
    output.innerHTML = input1.value * input2.value;
}
function add(input1, input2, input3, output) {
    output.innerHTML = parseInt( input1.innerHTML ) + parseInt( input2.innerHTML ) + parseInt( input3.innerHTML );
}
setInterval(function(){
    var temp;
    if (a == document.activeElement) {
        temp = a.value;
        if (astored != temp){
            astored = temp;
            a.setAttribute("data-in",temp);
            calculate(a, b, c);
        }
    } else if (b == document.activeElement) {
        temp = b.value;
        if (bstored != temp) {
            bstored = temp;
            b.setAttribute("data-in",temp);
            calculate(a, b, c);
        }
    } else if (d == document.activeElement) {
        temp = d.value;
        if (dstored != temp) {
            dstored = temp;
            d.setAttribute("data-in",temp);
            calculate(d, e, f);
        }
    } else if (e == document.activeElement) {
        temp = e.value;
        if (estored != temp) {
            estored = temp;
            e.setAttribute("data-in",temp);
            calculate(d, e, f);
        }
    } else if (h == document.activeElement) {
        temp = h.value;
        if (hstored != temp) {
            hstored = temp;
            h.setAttribute("data-in",temp);
            calculate(h, i, j);
        }
    } else if (i == document.activeElement) {
        temp = i.value;
        if (istored != temp) {
            istored = temp;
            i.setAttribute("data-in",temp);
            calculate(h, i, j);
        }
    }
     add(c, f, j, elem_to_print_into);
}, 50);
a.onblur = calculate(a, b, c);
b.onblur = calculate(a, b, c);
d.onblur = calculate(d, e, f);
e.onblur = calculate(d, e, f);
h.onblur = calculate(h, i, j);
i.onblur = calculate(h, i, j);
calculate(a, b, c);
calculate(d, e, f);
calculate(h, i, j);

感谢您帮助我创建代码并将其放入HTML。。。

使用输入标记的"min"answers"max"属性。

对于您的"e"输入字段,它看起来像这样:

<input id="e" min="0" max="12" input type="hidden" data-in="" value="2628002.88" type="text" />

更多信息