Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.08.2022, 23:28
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

Изменение цвета поля инпута при условии
Ниже указаны код создает несколько 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);
  });


});


<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_2">
      <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
      <div class="options_value" id="options_value">
        <p id="options_value" class="options_value"></p>
      </div>
      <button id="button1" class="button1" > Copy </button>
    </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>
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2022, 00:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

vasoli,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    #options_value2 .number:invalid {
    background-color: #FF0000;
   }

    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.sum_value input').click(function() {
                $('#options_value2').html('');
                $('input:checkbox:checked').each(function() {
                    $('#options_value2').append(`Max:${this.value} <input class="number" type="number" value="" max="${this.value}" /><br>`);
                });
            });

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

        });
    </script>
</head>

<body>
    <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>
                            </div>
                            <div id="2" class="table-td">
                                <input type="checkbox" value="22222" id="2_2"><span>B 2</span>
                            </div>
                            <div id="3" class="table-td">
                                <input type="checkbox" value="33333" id="3_3" ><span>C 3</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="column_3">
            <div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
            <div class="options_value2" id="options_value2">
            </div>
            <button id="button2" class="button2"> Copy </button>
        </div>
    </div>
</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2022, 01:24
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2022, 01:55
Аспирант
Отправить личное сообщение для vasoli Посмотреть профиль Найти все сообщения от vasoli
 
Регистрация: 03.08.2022
Сообщений: 33

а можно при превышении значения не только менять цвет фона но и проиграривать звуковой сигнал?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При отметке checkbox заполнение поля input text значением из друого поля на странице mxup Элементы интерфейса 21 27.12.2017 13:43
Изменение стиля всех одинаковых классов при наведение(клике) dmitriy39reg jQuery 10 03.02.2015 14:27
Почему введённые в поле данные исчезают при добавлении такого же нового поля? javascript_pupil Общие вопросы Javascript 6 30.01.2015 01:30
Изменение цвета текста кнопки и цвета кнопки при нажатии Setta jQuery 22 31.07.2013 17:48
Изменение цвета кнопки при активном поле paradox989 jQuery 7 08.06.2013 10:08