Изменение цвета поля инпута при условии

Question

Ниже указаны код создает несколько input с полями для заполнения. Как задать условие чтобы, в поля инпут можно былоб вводить только числа и если введенное число превышает численное значение, например value="11111" из инпута поле ввода менялов цвет?

$(document).ready(function() {
   $('.sum_value input').click(function() {
       $('#options_value2').html('');
       $('input:checkbox:checked').each(function() {
           $('#options_value2').append($(this).val() + '<input class="text" type="text" value="Мой текст" /><br>');
       });
   });


   $('#button2').on('click', () => {
      let span = $('.table-td noscript');
      let textX = $.makeArray($('.options_value2 input')).map(({
          value
      }, i) => `${span.eq(i).text()} ${value}`).join('\n');
      navigator.clipboard.writeText(textX);
  });


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="js_script.js" defer></script>
<div class="grid_css">
    <div class="column_1">
      <ul id="accordion">
        <li>
          <div class="line_All_green">

            <div class="sum_value">

              <div id="1" class="table-td">
                <input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
              </div>
              <div id="2" class="table-td">
                <input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
              </div>
              <div id="3" class="table-td">
                <input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
              </div>

            </div>
          </div>
        </li>
      </ul>

    </div>

    <div class="column_3" id="column_3">
      <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
      <div class="options_value2" id="options_value2">
        <p id="options_value2" class="options_value2"></p>
      </div>
      
      <button id="button2" class="button2" > Copy </button>
    </div>
  </div>

Answer 1

если связка html + css(без js) устроит, вот ловите на основе псевдоклассов *-range

input:in-range{background: #aaffaa;} /* ok */
input:out-of-range{background: #ffaaaa;} /* error */
input:valid{background: #aaffaa;} /* ok */
input:invalid{background: #ffaaaa;} /* error */

<form>
<input type='number' min='3' max='8' value='5' />
</form>

БЛОГ НА HUSL

Изменение цвета поля инпута при условии

Ответы (1 шт):