Eingabefeld, um nur Zahlen von 0 bis 12 zu akzeptieren?

Question

Ich möchte einen Js-Code erstellen, also in einem Eingabefeld (für den HTML-Code unten) kann ich nur Zahlen von 0 bis 12 setzen. Aber das Problem ist, dass die Eingabe bereits eine ID hat, also ... Das ist mein Code: 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); 

Dank für das mir helfen, den Code zu schaffen und es in HTML ...

Answer 1

Verwenden sie die "min" und "max" setzen Attribute für das Eingabe-Tag.

Für Ihre „e“ Eingabefeld, würde dies wie folgt aussehen:

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

More info