將文本框動態更改爲多行

我正在使用Firefox擴展。我有一個簡單的單行文本框。當用戶粘貼文本時，我想檢測文本是否有換行符，如果是，我想將文本框擴展爲多行文本框。將文本框動態更改爲多行

我

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

的問題是，雖然文本框不會被轉換爲5列多行文本框的值，粘貼失敗，文本框爲空白。我在這裏做錯了什麼？

來源

2012-09-08 Aurimas

簡答題：不，你沒有做錯任何事，當你從單線切換到多線時，預計值會被清除。長答案：<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"/>

而且在JavaScript端：

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

來源

2012-09-08 08:19:53

將文本框動態更改爲多行

回答

相關問題