variable - modificar dom javascript

Cambiar la envoltura de textarea usando javascript

Question

Para mi pequeña aplicación wiki, principalmente necesito tener el área de texto utilizada para editar los contenidos y usar envoltura suave (o virtual). Sin embargo, en algunos casos, no sería preferible no envolver el contenido. Pensé que haría esto simplemente con un botón para desactivar la envoltura. Aquí está el código simplificado:

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

Funciona con IE, pero no con Firefox u Opera. ¿Cómo debería hacer esto?

Answer 1

Aquí hay una introducción a textarea wrap, que incluye una solución CSS:

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

La solución de CSS que ellos citan es:

white-space: pre; overflow: auto;

Cuál podría ser:

<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 2

De acuerdo con la especificación HTML 4.01 , wrap no es un atributo válido para <textarea> s que explicaría por qué es tan difícil y extraño. Parece que Firefox realmente usa el atributo wrap , pero no le permite cambiarlo.

¡Tengo una solución! Es bastante horrible, pero aquí está. Reemplace completamente el área de texto por uno nuevo.

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

Aquí hay una versión de trabajo con la que puedes jugar: http://jsbin.com/ugepa

Como de costumbre, esto sería mucho mejor en jQuery. :)

Answer 3

Ver error 41464: https://bugzilla.mozilla.org/show_bug.cgi?id=41464

La solución desagradable por el momento es reemplazar el área de texto con un clon de sí mismo:

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

No relacionado: trate de evitar el acceso a los elementos directamente desde el objeto del documento, no es confiable en algunos navegadores y causa problemas de clasificación de nombres. ''document.forms.wikiedit'' es mejor, y pasar a ''id'' en el formulario en lugar de ''nombre'' y luego usar ''document.getElementById ('' wikiedit '')'' mejor aún.

form.elements.content también es más confiable que form.content por razones similares ... o, de hecho, puedes darle una identificación a textarea e ir directamente al área de texto con getElementById sin tener que molestarte en mirar el formulario.

Answer 4

Aunque, esta es una publicación anterior, pero a medida que obtengo ayuda de esto, también debo mostrar un método más fácil que encontré en este momento. Y creo que es más correcto.

Para reemplazar el .cloneNode (), creo que el mejor método es:

child.setAttribute (''wrap'', wrap); parent.removeChild (child); parent.appendChild (child);

de esta forma, no solo puede guardar los atributos de sí mismo, sino también los atributos que agregó, por ejemplo, un identificador de script u otra cosa.

Answer 5

Pruebe esta extensión jQuery: Textarea Wrap Changer .

Answer 6

Aquí hay una variante de la respuesta de bobince que no requiere clonar el área de texto:

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

Esto es similar al comentario de VK en el error al que se refirió bobince, pero configurar la pantalla en lugar del desbordamiento no funcionó para mí a menos que coloque el segundo conjunto en un setTimeout.