如何限制用户数量输入的高度？

时间：2016-07-22 04:54:21

标签： javascript html

我一直在寻找堆栈溢出但未找到适合我程序的答案。我不希望用户能够输入任何高于24的数字（由于一天只有24小时）。我不知道输入盒是否合适。任何帮助都会很棒！

由于

<!DOCTYPE html>
<html>
 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
		<title>The Gaming Hours Quiz</title>
			<body>
				<h1>The Gaming Hours Quiz</h1>
			</body>
				<p>Welcome to the Gaming Hours Quiz. Please fill out the neccesary information correctly to get your true results</p>

		<h3 id= "nametitle">What is your name?</h3>
<input id="name" type="letter" name="" value="type name here..." />				

		<h3>How many hours have you gamed on Monday?</h3>
<input id="monday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2" />


<h3>How many hours have you gamed on Tuesday?</h3>
<input id="tuesday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Wednesday?</h3>
<input id="wednesday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Thursday?</h3>
<input id="thursday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Friday?</h3>
<input id="friday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Saturday?</h3>
<input id="saturday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Sunday?</h3>
<input id="sunday" type="number" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>





<br>
<br>
<button id="button">Submit</button>


</html>
<script>

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


function total() {
	var th = Number(monday.value) + Number(tuesday.value) + Number(wednesday.value) + Number(thursday.value) + Number(friday.value) + Number(saturday.value) + Number(sunday.value);
	alert("You gamed for " + th + " hours this week");



var ah = th / 7;
alert("Your average is " + ah + " hours this week");

var arr = [Number(monday.value), Number(tuesday.value), Number(wednesday.value), Number(thursday.value), Number(friday.value), Number(saturday.value), Number(sunday.value)]

var hh = 0;
var max = arr[0];
var days = ["monday","tuesday","wednesday", "thursday", "friday", "saturday", "sunday"];
var dayOfMax = 0;

for(var i = 1;i < arr.length;i++) {
	if(arr[i-1] < arr[i]) {
  	max = arr[i];
    dayOfMax = i;
  }
}

alert("Maximum hours you have gamed in one day is " + max);
alert("The day when you have gamed the maximum amount on is " + days[dayOfMax]);
// 0 for Monday, 1 for Tuesday, 2 for Wednesday, and so on
}


button.onclick = total;

</script>

5 个答案:

答案 0 :(得分：1)

min和max属性

您应该使用HTML5输入属性min和max。此外，这会在输入字段中添加浏览器验证。有关示例的固定版本，请参阅代码示例。

<!DOCTYPE html>
<html>
 <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
		<title>The Gaming Hours Quiz</title>
			<body>
				<h1>The Gaming Hours Quiz</h1>
			</body>
				<p>Welcome to the Gaming Hours Quiz. Please fill out the neccesary information correctly to get your true results</p>

		<h3 id= "nametitle">What is your name?</h3>
<input id="name" type="letter" name="" value="type name here..." />				

		<h3>How many hours have you gamed on Monday?</h3>
<input id="monday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2" />


<h3>How many hours have you gamed on Tuesday?</h3>
<input id="tuesday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Wednesday?</h3>
<input id="wednesday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Thursday?</h3>
<input id="thursday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Friday?</h3>
<input id="friday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Saturday?</h3>
<input id="saturday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>


<h3>How many hours have you gamed on Sunday?</h3>
<input id="sunday" type="number" min="0" max="24" name="" value="0" onkeypress="return isNumberKey(event)" maxlength="2"/>





<br>
<br>
<button id="button">Submit</button>


</html>
<script>

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}


function total() {
	var th = Number(monday.value) + Number(tuesday.value) + Number(wednesday.value) + Number(thursday.value) + Number(friday.value) + Number(saturday.value) + Number(sunday.value);
	alert("You gamed for " + th + " hours this week");



var ah = th / 7;
alert("Your average is " + ah + " hours this week");

var arr = [Number(monday.value), Number(tuesday.value), Number(wednesday.value), Number(thursday.value), Number(friday.value), Number(saturday.value), Number(sunday.value)]

var hh = 0;
var max = arr[0];
var days = ["monday","tuesday","wednesday", "thursday", "friday", "saturday", "sunday"];
var dayOfMax = 0;

for(var i = 1;i < arr.length;i++) {
	if(arr[i-1] < arr[i]) {
  	max = arr[i];
    dayOfMax = i;
  }
}

alert("Maximum hours you have gamed in one day is " + max);
alert("The day when you have gamed the maximum amount on is " + days[dayOfMax]);
// 0 for Monday, 1 for Tuesday, 2 for Wednesday, and so on
}


button.onclick = total;

</script>

答案 1 :(得分：0)

您可以尝试添加max =＆＃34; 24＆＃34;或者做这样的

<!DOCTYPE html>
<html>
<body>

<p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

Enter some text: <input type="number" id="numbertype" name="txt" value="" onchange="myFunction(this.value)">

<script>
function myFunction(val) {
     if(val > 24)
     {
      alert("Please enter less or Equal to: " + val)
       document.getElementById('numbertype').value =  24;
     }

}
</script>

</body>
</html>

for ref https://plnkr.co/edit/2jnOzyrlgCeCi8ydatUg

答案 2 :(得分：0)

添加属性max = 24并使用onkeyup事件

<!DOCTYPE html>
    <html>
    <body>
    Enter Value: <input type="number" id="numbertype" name="txt" max="24" value="" onkeyup="check(this.value)">
    <script>
    function check(val) {
         if(val > 24)
           {
            alert("Please enter less or Equal to 24");
            document.getElementById('numbertype').value =  24;
             }

        }
        </script>

        </body>
        </html>

答案 3 :(得分：0)

使用以下代码识别用户是否输入大于24的值，

 $('#monday').blur(function() {
        if ($(this).val() >= 25) {
           alert("pls enter less value");                               
            $('#monday').val(''); //this will empty the textbox
        }
     });

同样，您可以将其用于其他字段。

答案 4 :(得分：0)

建议：投入

 <h3 id= "nametitle">What is your name?</h3>
 <input id="name" type="letter" name="" value="type name here..." />

使用

 <h3 id= "nametitle">What is your name?</h3>
 <input id="name" type="letter" name="" placeholder="type name here..." />

这样用户就不必在这里删除“类型名称......”

相关问题
最新问题