Взаимодействие с textarea в Javascript (...)
Как сделать то что написано на скрине. Скрипт
1234567891011121314151617181920
const addField = () => {
let nr = document.createElement('tr');
tb.appendChild(nr);
let ntd = document.createElement('td');
nr.appendChild(ntd);
let w1 = ntd.offsetWidth - 12;
let h1 = ntd.offsetHeight;
let inp1 = document.createElement('textarea');
inp1.setAttribute('rows','1');
inp1.focus();
inp1.style.width = w1 + 'px';
inp1.style.heght = h1 + 'px';
ntd.appendChild(inp1);
let ntd2 = document.createElement('td');
nr.appendChild(ntd2);
let ntd3 = document.createElement('td');
nr.appendChild(ntd3);
}
but1.addEventListener('click', addField) По дате
По рейтингу
inp1.style.heght
это что еще такое?
Можно и стили скриптом конечно добавить, хотя лучше статикой не загромождать, для этого есть отдельные файлы.
12345678910111213141516171819202122232425262728293031
const addField = () => {
let nr = document.createElement('tr');
tb.appendChild(nr);
let ntd = document.createElement('td');
nr.appendChild(ntd);
let w1 = ntd.offsetWidth - 12;
let h1 = ntd.offsetHeight;
let inp1 = document.createElement('textarea');
inp1.setAttribute('rows', '1');
inp1.focus();
inp1.style.width = w1 + 'px';
inp1.style.height = h1 + 'px';
inp1.style.boxSizing = 'border-box';
inp1.style.resize = 'none';
inp1.style.overflow = 'hidden';
ntd.appendChild(inp1);
let ntd2 = document.createElement('td');
nr.appendChild(ntd2);
let ntd3 = document.createElement('td');
nr.appendChild(ntd3);
}
but1.addEventListener('click', addField);
добавь style свойство resize: none, чтобы его нельзя было ресайзнуть
а ну и размер по родительскому компоненту задается через "width: 100%" - так он эмулирует полную ширину родителя, если у него задан свой размер
"у него" - у родителя, соответственно
Видео по теме