0

我正在开发一个 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 行多行文本框，但粘贴的值丢失并且文本框为空白。我在这里做错了吗？

4

1 回答 1

2

简短回答：不，您没有做错任何事情，当您从单行切换到多行时，该值预计会被清除。长答案：<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-08T08:19:53.797 回答