使用javascript更改textarea包装

对于我的小型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。我应该怎么做？

根据，

wrap

不是

的有效属性，这可以解释为什么它如此困难和奇怪。看起来Firefox确实使用了

wrap

属性，但它不允许您更改它

不过我有一个解决办法！这很糟糕，但在这里。用新的文本区域完全替换文本区域

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

//这是按钮的onclick处理程序
document.getElementById（“nowrapButton”）.onclick=function（）{
var oldOne=this.form.content；//旧文本区域
var newOne=document.createElement（'textarea'）；//新的textarea
var attrs=['name'，'rows'，'cols']；//这些是要保留的属性
对于（变量i=0；i

以下是您可以使用的工作版本：

和往常一样，这在jQuery中会更好。：）

参见bug 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，而不必费心看表单。

这里是关于textarea wrap的入门，包括CSS解决方案：

他们引用的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>

函数setNoWrap（文本区域）{
textarea.style.whiteSpace='pre'；
textarea.style.overflow='auto'；
}
[[内容]]

虽然，这是一篇老文章，但当我从中得到帮助时，我还想展示我刚才找到的一种更简单的方法。我认为这更正确

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

setAttribute（'wrap'，wrap）； 父母。removeChild（子女）； 父、子（子）

---

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

尝试此jQuery扩展：。

这里有一个不需要克隆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中的注释，但是设置display而不是overflow对我来说不起作用，除非我将第二个设置放入setTimeout。

什么是“textarea.wrap”？