javaScript - 数値入力 - 特定の数値を受け入れる

Question

5つの入力に 'number'タイプがあります。ユーザーが入力する最大値は '5'です。
ユーザーが最初の入力フィールドに「4」などを入力したいとします。彼は他の分野でこの番号を再び提出することはできません。

でも、メッセージをポップアップして警告することもできます。
アラートがブラウザに組み込まれている場合、フィールドが「最大」よりも多くの番号を入力したときのように、フィールドが間違った割り当てとして赤色になるような場合は、素晴らしいことです。

私は配列を作ることができます。ユーザが値を送信したときに配列の値をチェックし、そうでなければ配列 にプッシュしますが、警告のデザインをする必要があります。

スマートで簡単なソリューションを探しています。

<input type='number' max = '5' onchange = 'change(this)'> 
<input type='number' max = '5' onchange = 'change(this)'> 
<input type='number' max = '5' onchange = 'change(this)'> 
<input type='number' max = '5' onchange = 'change(this)'> 
<input type='number' max = '5' onchange = 'change(this)'> 

function change(it) 
{ 
    // what shoult I do ?!... 

} 

ありがとう。

Answer 1

jqueryを使用して、変更時にフィールドの値を互いに比較できます。 この回答を参照してください：

https://stackoverflow.com/a/30307040/1333744

Answer 2

あなたは何ができるかが、すべての入力にクラスを与え、「foo」で言うことができます。

その後、jQueryのようになる：あなたは、（私は心をいけない）、このような '小さな' 事のためのjQueryを使用しない場合

<input type='number' max = '5' class='foo'> 
<input type='number' max = '5' class='foo'> 
<input type='number' max = '5' class='foo'> 
<input type='number' max = '5' class='foo'> 
<input type='number' max = '5' class='foo'> 

：

$(".foo").on('change', function() { 
    var inputNumber = $(this).val(); 
    if (inputNumber > 5) { 
    alert("Can't enter more than 5! Sorry"); 
    $(this).val(5); 
    } else { 
    var array = []; 
     $siblings = $(this).siblings(); 
     $.each($siblings, function (key, value) { 
      array.push($(value).val()); 
     }); 
if ($.inArray($(this).val(), array) !== -1) 
    { 
     alert("You have already entered that number"); 
    } 
    } 
}); 

HTML JavascriptにjQueryを変換するには、提供されたコードを見てください。