Как заменить ввод полями textarea
В настоящее время я работаю над проектом html5, в котором есть много полей input, которые я хочу заменить на textarea.
Пример:
<input type = "text" id = "Questions" name = "texte1"/>
<input type = "text" id = "Questions" name = "texte2"/>
<input type = "text" id = "Questions" name = "texte3"/>
Есть 200 входов, которые я хочу изменить:
<textarea id = "Questions" name = "texte1"></textarea>
<textarea id = "Questions" name = "texte2"></textarea>
<textarea id = "Questions" name = "texte3"></textarea>
но я не могу использовать инструмент поиска и замены, потому что имя разное для каждого ввода. Поэтому мне было интересно, знает ли кто-нибудь из вас быстрый способ заменить все мои вводы текстовой областью, не меняя имена 1 на 1 в моем коде.
Хорошо, спасибо, мне лучше использовать class вместо id? И у всех у них есть все общее, кроме разных названий.
Вы пробовали использовать pug?
Я не знал, я сообщу мне об этом, спасибо.
Ответы 1
Вам нужен критерий, который подскажет, какие входные данные необходимо заменить. Что у них общего? Также обратите внимание, что у вас не может быть более одного элемента на странице с одинаковым значением для id, поэтому отображаемый HTML-код недействителен.
Итак, для примера кода я предполагаю, что все входные данные, которые необходимо заменить, имеют CSS-класс replace-me:
document.getElementById('replace').addEventListener('click', (e) => {
const toReplace = [...document.querySelectorAll('.replace-me')]
for (const input of toReplace) {
const textarea = document.createElement('textarea')
const parent = input.parentNode
textarea.id = input.id
textarea.name = input.name
textarea.value = input.value
parent.removeChild(input)
parent.appendChild(textarea)
}
})<div>
<input class = "replace-me" type = "text" value = "1" id = "i1" name = "foo1" />
<input class = "replace-me" type = "text" value = "2" id = "i2" name = "foo2" />
<input class = "replace-me" type = "text" value = "3" id = "i3" name = "foo3" />
<input class = "replace-me" type = "text" value = "4" id = "i4" name = "foo4" />
<input class = "replace-me" type = "text" value = "5" id = "i5" name = "foo5" />
</div>
<button type = "button" id = "replace">Click to replace</button>
Вам нужен критерий, который подскажет, какие входные данные необходимо заменить. Что у них общего? Также обратите внимание, что у вас не может быть более одного элемента на странице с одинаковым значением для
id, поэтому отображаемый HTML-код недействителен.