Question

我想创建一个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 ...

Answer 1

使用＆＃34; min＆＃34;和＆＃34; max＆＃34;输入标记的属性。

对于你的＆＃34; e＆＃34;输入字段，这看起来像这样：

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

More info

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

1 个答案: