html - ¿Cómo eliminar palabras de textarea?
textarea value javascript (6)
Encontré una manera de hacer un área de texto con todo esto funcionando al mismo tiempo:
- Con barra de desplazamiento horizontal
- Soporte de texto multilínea
- Texto no envolvente
Funciona bien en:
- Chrome 15.0.874.120
- Firefox 7.0.1
- Opera 11.52 (1100)
- Safari 5.1 (7534.50)
- IE 8.0.6001.18702
Permítanme explicar cómo llegué a eso: estaba usando la herramienta integrada de inspector de Chrome y vi valores en estilos CSS, así que pruebo estos valores, en lugar de los normales ... pruebas y errores hasta que lo reduje al mínimo y aquí es para cualquiera que lo quiera.
En la sección de CSS utilicé solo esto para Chrome, Firefox, Opera y Safari:
textarea {
white-space:nowrap;
overflow:scroll;
}
En la sección CSS utilicé solo esto para IE:
textarea {
overflow:scroll;
}
Fue un poco complicado, pero está el CSS.
Una (x) etiqueta HTML como esta:
<textarea id="myTextarea" rows="10" cols="15"></textarea>
Y al final de la sección <head> un JavaScript como este:
window.onload=function(){
document.getElementById("myTextarea").wrap=''off'';
}
El JavaScript es para hacer que el validador W3C pase XHTML 1.1 Strict, ya que el atributo wrap no es oficial y no puede ser una etiqueta (x) HTML directamente, pero la mayoría de los navegadores lo manejan, por lo que después de cargar la página establece ese atributo.
Espero que esto se pueda probar en más navegadores y versiones y ayudar a alguien a mejorarlo y lo hace completamente navegador cruzado para todas las versiones.
mi área de texto simple no muestra una barra horizontal cuando el texto se desborda. Envuelve texto para una nueva línea. Entonces, ¿cómo elimino wordwrap y visualizo la barra horizontal cuando el texto se desborda?
Esta pregunta parece ser la más popular para deshabilitar el textarea . Sin embargo, a partir de abril de 2017, encuentro que IE 11 (11.0.9600) no desactivará el ajuste de palabras con ninguna de las soluciones anteriores.
La única solución que funciona para IE 11 es wrap="off" . wrap="soft" y / o los diversos atributos de CSS como white-space: pre altera donde IE 11 elige envolver pero todavía se envuelve en algún lugar. Tenga en cuenta que he probado esto con o sin Vista de compatibilidad . IE 11 es bastante compatible con HTML 5, pero no en este caso.
Por lo tanto, para lograr líneas que conserven su espacio en blanco y salgan del lado derecho, estoy usando:
<textarea style="white-space: pre; overflow: scroll;" wrap="off">
Afortunadamente, esto parece funcionar también en Chrome y Firefox. No defiendo el uso de pre-HTML 5 wrap="off" , simplemente diciendo que parece ser necesario para IE 11.
La siguiente solución basada en CSS me funciona:
<html>
<head>
<style type=''text/css''>
textarea {
white-space: nowrap;
overflow: scroll;
overflow-y: hidden;
overflow-x: scroll;
overflow: -moz-scrollbars-horizontal;
}
</style>
</head>
<body>
<form>
<textarea>This is a long line of text for testing purposes...</textarea>
</form>
</body>
</html>
Si puede usar JavaScript, la siguiente podría ser la opción más portátil hoy (probado Firefox 31, Chrome 36):
- un div con
contenteditable="true" - los estilos sugeridos por Parcialmente
- Envío de formulario JavaScript al hacer clic en el botón: ¿Cómo enviar un formulario usando javascript?
http://jsfiddle.net/cirosantilli/eaxgesoq/
<style>
div#editor {
white-space: pre;
word-wrap: normal;
overflow-x: scroll;
}
<style>
<div contenteditable="true"></div>
Parece que no hay una solución CSS estándar y portátil:
wrapatributo dewrapno es estándarwhite-space: pre;no funciona para Firefox 31 paratextarea. Fiddle , bugzilla.mozilla.org/show_bug.cgi?id=82711 .
Además, si puede usar Javascript, también podría usar el editor de ACE:
http://jsfiddle.net/cirosantilli/bL9vr8o8/
<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
<div id="editor">content</div>
<script>
var editor = ace.edit(''editor'')
editor.renderer.setShowGutter(false)
</script>
Probablemente funciona con ACE porque no usa un área de textarea que no está especificado / incoherentemente implementado, pero no está seguro si se usa contenteditable .
Textareas no debe ajustarse de manera predeterminada, pero puede establecer wrap = "soft" para deshabilitar explícitamente el ajuste:
<textarea name="nowrap" cols="30" rows="3" wrap="soft"></textarea>
EDITAR: El atributo "envolver" no es oficialmente compatible. Lo obtuve de la página alemana de SELFHTML (una fuente en inglés está here ) que dice que IE 4.0 y Netscape 2.0 lo admiten. También lo probé en FF 3.0.7 donde funciona como se supone. Las cosas han cambiado aquí, SELFHTML es ahora una wiki y el enlace de la fuente en inglés está muerto.
EDIT2: si quiere estar seguro de que todos los navegadores lo admiten, puede usar CSS para cambiar el comportamiento de ajuste:
Usando Hojas de Estilo en Cascada (CSS), puede lograr el mismo efecto con
white-space: nowrap; overflow: auto;white-space: nowrap; overflow: auto;. Por lo tanto, el atributo de ajuste se puede considerar desactualizado.
Desde here (parece ser una página excelente con información sobre textarea).
EDIT3: No estoy seguro de cuándo cambió (de acuerdo con los comentarios, debe haber sido alrededor de 2014), pero wrap es ahora un atributo oficial de HTML5, consulte w3schools . Cambió la respuesta para que coincida con esto.
textarea {
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
white-space: nowrap también funciona si no te preocupa el espacio en blanco, pero por supuesto no quieres eso si estás trabajando con código (o párrafos con sangría o cualquier contenido donde deliberadamente haya múltiples espacios) ... entonces prefiero pre .
overflow-wrap: normal (era un ajuste de word-wrap en navegadores más antiguos) es necesario en caso de que algún padre haya cambiado esa configuración; puede causar envoltura incluso si se establece pre .
también, contrariamente a la respuesta actualmente aceptada, las áreas de texto a menudo se envuelven por defecto. pre-wrap parece ser el predeterminado en mi navegador.