Проверить длину динамического текстового поля

У меня есть динамическая таблица, которая содержит несколько текстовых полей. Мне нужно, чтобы текстовое поле B имело максимум 6 входных чисел и выдавало ошибку, если входное значение меньше и не равно 6. Пожалуйста, помогите, я новичок в javascript

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);


  row.insertCell(0).innerHTML = '<input type = "text" name = "A" size = "20" maxlength = "6" required/>';
  row.insertCell(1).innerHTML = '<input type = "text" name = "B" size = "20" required/>';
  row.insertCell(2).innerHTML = '<input type = "text" name = "C" size = "20" required/>';

}
<input type = "button" id = "add" value = "Add" onclick = "Javascript:addRow()">
<table id = "bod">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
</table>

Взгляните на этот пост (stackoverflow.com/a/10294291/10353987). В нем описывается, как вы можете использовать шаблон, если вам нужна более сложная проверка для вашего ввода.

etarhan 04.04.2019 02:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Создайте input вручную и addEventListener к нему. Что-то вроде этого.

function addRow() {
  var table = document.getElementById("bod");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  row.insertCell(0).innerHTML = '<input type = "text" name = "A" size = "20" maxlength = "6" required/>';
  var colB = row.insertCell(1);
  var inp = document.createElement('input');
  inp.type = 'text';
  inp.name = 'B';
  inp.size = 20;
  inp.required = true;
  colB.appendChild(inp);
  inp.addEventListener('change', function() {
    if (this.value.length !== 6) {
      alert('wrong value');
      this.focus();
    }
  });
  row.insertCell(2).innerHTML = '<input type = "text" name = "C" size = "20" required/>';

}
<input type = "button" id = "add" value = "Add" onclick = "addRow()">
<table id = "bod">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
  </tr>
</table>

Другие вопросы по теме