Блог

Главная - Вопросы по программированию - Как автоматически сгенерировать число в поле ввода?

Как автоматически сгенерировать число в поле ввода?

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Я создаю таблицу со столбцом идентификатора автоматической нумерации. Я хочу, чтобы мое текстовое поле ввода автоматически генерировало идентификационный номер (когда пользователь начинает вводить в поле ввода имя).

Как мне автоматически сгенерировать число в поле ввода?

Комментарии:

1. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… вы также могли бы использовать библиотеку javascript, такую как uuid.v4() npmjs.com/package/uuid

Ответ №1:

Вы могли бы использовать приведенный ниже код. Что он делает, так это то, что каждый раз, когда вы нажимаете insert кнопку, он добавляет число к идентификатору элемента (число рядом с текстовым полем).

Этот код используется document.getElementById() для изменения всех элементов и использует переменную num для увеличения значения id. Часть, где он добавляет элемент в список, необязательна — я просто добавил ее, чтобы сделать ее более реалистичной. 

 var num = 1;
var input = document.getElementById('item');
var p = document.getElementById('number');
var list = document.getElementById('list');
var button = document.getElementById('insert');

button.addEventListener('click', function() {
  num  ;
  p.innerHTML = num;
  list.innerHTML  = "<li>"   input.value   "</li>";
});  
 #item {
  display: inline;
}

#number {
  display: inline;
  margin-right: 10px;
}  
 <p id='number'>1</p>
<input type='text' id='item' />
<button id='insert'>Insert</button>

<ul id='list'>
  
</ul>

Ответ №2:

Если у вас есть HTML-таблица, то вы могли бы реагировать на все изменения, прослушивая input событие, и решать, вводить ли уникальный номер (или стереть его).

Вот универсальная функция, которую вы могли бы вызвать, которая принимает в качестве аргумента элемент таблицы, который должен иметь эту функцию, и номер столбца, который должен получать эти значения идентификатора.

Пример:

 function autoId(table, colNo) {
    table.addEventListener("input", function(e) {
        const tr = e.target.closest("tr");
        const idInput = tr.cells[colNo].querySelector("input");
        for (const input of tr.querySelectorAll("input")) {
            hasData = input.value.trim() !== "" amp;amp; input !== idInput;
            if (hasData) break;
        }
        if (hasData amp;amp; idInput.value.trim() === "") {
            idInput.value = (Math.max(...Array.from(
                table.querySelectorAll("td:nth-child("   (colNo 1)   ") input"), 
                input =>  input.value
            ).filter(v => !isNaN(v))) || 0)   1;
        } else if (!hasData amp;amp; idInput.value.trim() !== "") {
            idInput.value = "";
        }
    });
}

const table = document.querySelector("table");

// Call the function passing it the table and the column that has the ID -- that's all
autoId(table, 0);

// Let's give user the possibility to add rows, using the first data row as template
document.querySelector("#btnAddRow").addEventListener("click", () => {
    table.insertAdjacentHTML("beforeend", table.rows[1].innerHTML);
});  
 <table>
<tr><th>ID</th><th>Name</th></tr>
<tr><td><input size="2"></td><td><input></td></tr>
</table>
<button id="btnAddRow">Add row</button>