텍스트 상자를 동적으로 다중 행으로 변경

Question

Firefox 확장 기능을 사용 중입니다. 간단한 한 줄짜리 텍스트 상자가 있습니다. 사용자가 텍스트를 붙여 넣을 때 텍스트에 줄 바꿈이 있는지 감지하고 싶을 때 텍스트 상자를 여러 줄로 된 텍스트 상자로 확장하려고합니다.

는 I 문제가 텍스트 박스가 5 행 여러 텍스트 박스로의 변환 값을 얻을 않지만 즉,이다

<textbox id="textbox" rows="5" wrap="off" newlines="pasteintact" oninput="adjustTextbox(this)" flex="1"/> 

및 JS 측

제가

adjustTextbox(txtBox) { 
    if(!txtBox.getAttribute('multiline') && txtBox.value.match(/[\r\n]/)) { 
    txtBox.setAttribute('multiline', true); 
    } 
} 

을 가지고 붙여 넣기가 손실되고 텍스트 상자가 비어 있습니다. 내가 여기서 뭔가 잘못하고있는거야?

Answer 1

짧은 대답 : 아니오, 잘못된 것은 아닙니다. 한 줄에서 여러 줄로 전환하면 값이 지워질 것으로 예상됩니다. 긴 대답 : <textbox> 요소는 실제로 값 자체를 보유하지 않으며 익명의 <html:input type="text>을 포함합니다. multiline 특성을 추가하면 다른 XBL 바인딩이 요소에 적용되고 익명 텍스트 필드는 <html:textarea>으로 바뀝니다. 물론이 값은 프로세스에서 손실됩니다.

multiline 특성을 추가하면 값을 저장하고 복원 할 수 있습니다. 문제는 바인딩이 실제로 적용될 때 알기가 어렵다는 것이고, 실제로 예측할 수없는 지연이 있다는 것입니다.

<textbox id="textbox" newlines="pasteintact" oninput="adjustTextbox(this)" flex="1"/> 
<textbox id="textbox2" collapsed="true" multiline="true" rows="5" wrap="off" flex="1"/> 

그리고 자바 스크립트 측 :

그래서 더 나은 솔루션은 단일 라인과 문서에 여러 줄의 텍스트 상자를 모두 가지고 있고 그 중 하나가 항상 붕괴되어 있는지 확인하는 것입니다

function adjustTextbox(txtBox) { 
    if(!txtBox.getAttribute('multiline') && txtBox.value.match(/[\r\n]/)) { 
    var txtBox2 = document.getElementById("textbox2"); 
    txtBox2.value = txtBox.value; 
    txtBox.collapsed = true; 
    txtBox2.collapsed = false; 
    } 
}