Question

对于我的小wiki应用程序，我主要需要使用textarea来编辑内容以使用软（或虚拟）包装。但是，在某些情况下，不包装内容将是更可取的。我想我只需要一个按钮来关闭包装即可。这是简化的代码：

  <form name="wikiedit" action="[[script_name]]" method="post">
    <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
    <input type="button" onclick="document.wikiedit.content.wrap='off';" value="No Wrap"> &nbsp;
    <input type="submit" value="Save">
  </form>

它适用于IE，但不适用于Firefox或Opera。我该怎么做？

Answer 1

请参阅错误41464：https://bugzilla.mozilla.org/show_bug.cgi?id=41464

现在令人讨厌的解决方法是用自己的克隆替换textarea：

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap= wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute('wrap', wrap);
        var newarea= area.cloneNode(true);
        newarea.value= area.value;
        area.parentNode.replaceChild(newarea, area);
    }
}

不相关：尽量避免直接从文档对象访问元素，在某些浏览器上它是不可靠的并导致名称冲突问题。 'document.forms.wikiedit'更好，并且在表单上移动到'id'而不是'name'，然后更好地使用'document.getElementById（'wikiedit'）。

由于类似的原因， form.elements.content也比form.content更可靠......或者，实际上，你可以给textarea一个ID并直接使用getElementById直接到textarea，而不必费心查看表单。

Answer 2

这是textarea包装的入门读物，包括CSS解决方案：

http://www.web-wise-wizard.com/html-tutorials/html-form-forms-textarea-wrap.html

他们引用的CSS解决方案是：

white-space: pre; overflow: auto;

这将是：

<script type="text/javascript">
function setNoWrap(textarea) {
    textarea.style.whiteSpace = 'pre';
    textarea.style.overflow = 'auto';
}
</script>
<form name="wikiedit" action="[[script_name]]" method="post">
 <textarea name="content" rows="25" cols="90" wrap="virtual">[[content]]</textarea>
 <input type="button" onclick="setNoWrap(this);" value="No Wrap">  
 <input type="submit" value="Save">
</form>

Answer 3

根据the HTML 4.01 spec，wrap不是<textarea>的有效属性，这可以解释为什么它如此困难和奇怪。看起来Firefox实际上确实使用了wrap属性，但它不会让你改变它。

我确实有一个解决方案！这太糟糕了，但现在就是这样。完全用新的替换textarea。

// this is the onclick handler for your button
document.getElementById("nowrapButton").onclick = function() {
  var oldOne = this.form.content;  // the old textarea
  var newOne = document.createElement('textarea'); // the new textarea
  var attrs = ['name', 'rows', 'cols']; // these are the attributes to keep
  for (var i = 0; i < attrs.length; ++i) {
    // copy the attributes to the new one
    newOne.setAttribute(attrs[i], oldOne.getAttribute(attrs[i]));
  }

  // toggle the wrapping on and off
  if (oldOne.getAttribute('wrap') != 'off') {
    newOne.setAttribute('wrap', 'off');
  }

  // copy the text over
  newOne.value = oldOne.value;

  // add the new one
  oldOne.parentNode.insertBefore(newOne, oldOne);
  // get rid of the old one
  oldOne.parentNode.removeChild(oldOne);
  return false;
};

以下是您可以使用的工作版本：http://jsbin.com/ugepa

像往常一样，这在jQuery中要好得多。：）

Answer 4

虽然，这是一篇很老的帖子，但是当我从中获得帮助时，我还要展示一种我刚才发现的更简单的方法。而且我认为这更正确。

要替换.cloneNode（），我认为最好的方法是：

child.setAttribute（'wrap'，wrap）; parent.removeChild（child）; parent.appendChild（child）;

使用这种方式，您不仅可以保存自身的属性，还可以保存您添加的属性，例如脚本句柄或其他内容。

Answer 5

试试这个jQuery扩展：Textarea Wrap Changer。

Answer 6

这是bobince's answer的变体，不需要克隆textarea：

function setWrap(area, wrap) {
    if (area.wrap) {
        area.wrap = wrap;
    } else { // wrap attribute not supported - try Mozilla workaround
        area.setAttribute("wrap", wrap);
        area.style.overflow = "hidden";
        area.style.overflow = "auto";
    }
}

这类似于bobince引用的bug中的VK's注释，但是设置显示而不是溢出对我来说不起作用，除非我把第二个集放在setTimeout中。

使用javascript更改textarea包装

6 个答案: