Я искал переполнение стека, но не нашел ответа, который подходит для моей программы. Я не хочу, чтобы пользователь мог поставить любое число выше 24 (из-за только 24 часа в день). Я не знаю, подходят ли окна ввода или нет. Любая помощь будет потрясающей!Как ограничить количество входных данных пользователей?

Благодаря

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

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

 
\t \t <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() { 
 
\t var th = Number(monday.value) + Number(tuesday.value) + Number(wednesday.value) + Number(thursday.value) + Number(friday.value) + Number(saturday.value) + Number(sunday.value); 
 
\t 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++) { 
 
\t if(arr[i-1] < arr[i]) { 
 
    \t 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>

2016-07-22 James L

Используйте выпадающий, это будет лучший пользовательский интерфейс –

Просто добавьте 'max =" 24 "' к вашим ''s. Ограничение входных значений не является хорошей практикой, и это не дает вам дополнительной безопасности. –

Этот метод не работает –

Вы можете попробовать добавить макс = "24" или же делать, как этот

<!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>

для исх https://plnkr.co/edit/2jnOzyrlgCeCi8ydatUg

источник

2016-07-22 05:53:05

`min` и `max` атрибуты

Вы должны использовать атрибуты ввода HTML5 min и max. Кроме того, это добавляет проверку браузера в поля ввода. См. Пример кода для фиксированной версии вашего примера.

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

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

 
\t \t <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() { 
 
\t var th = Number(monday.value) + Number(tuesday.value) + Number(wednesday.value) + Number(thursday.value) + Number(friday.value) + Number(saturday.value) + Number(sunday.value); 
 
\t 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++) { 
 
\t if(arr[i-1] < arr[i]) { 
 
    \t 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>

источник

2016-07-22 06:49:38 kenda

Добавить Атрибут макс = 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>

источник

2016-07-22 06:59:02

Используйте следующий код, чтобы определить, является ли пользователь ввод значение больше, чем 24,

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

Точно так же вы можете использовать его для остальной части полей.

источник

2016-07-22 08:16:31

Предложение: InstEd из

<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..." />

так, чтобы пользователь own't должен удалить "имя типа здесь ..."

источник

2016-07-22 08:24:23

Как ограничить количество входных данных пользователей?

ответ

min и max атрибуты

Смежные вопросы

`min` и `max` атрибуты