Взаимодействие с textarea в Javascript (...)

Question

Взаимодействие с textarea в Javascript (...)

Celtic Hammer Мудрец (17457), открыт 6 дней назад

Как сделать то что написано на скрине. Скрипт

 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)

Answer 1

Кирилл Герасименко Знаток (433) 6 дней назад

добавь style свойство resize: none, чтобы его нельзя было ресайзнуть

Кирилл ГерасименкоЗнаток (433) 6 дней назад

а ну и размер по родительскому компоненту задается через "width: 100%" - так он эмулирует полную ширину родителя, если у него задан свой размер

Кирилл ГерасименкоЗнаток (433) 6 дней назад

"у него" - у родителя, соответственно

Answer 2

inp1.style.heght

это что еще такое?

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

 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);