Top.Mail.Ru
Ответы

Взаимодействие с 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%" - так он эмулирует полную ширину родителя, если у него задан свой размер

Аватар пользователя
Ученик

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



Видео по теме