Question

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

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"/>

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

将文本框动态更改为多行

1 个答案: