textarea{text-indent:2em;} en OPERA no funciona

quico5 · #1 (**permalink**) 22/04/2012, 07:57

¿Le pasa a mas gente? En el resto de navegadores si funciona

No me funciona en OPERA 11.62
textarea{text-indent:2em;}

sin embargo esto si lo acepta
input{text-indent:2em;}

pero claro, son cosas distintas

¿alguna idea?

furoya · #2 (**permalink**) 23/04/2012, 11:21

Sí. Así es Opera.

¿Y esto no te sirve, para salir del apuro?

Código:

<style type="text/css">

textarea {padding-left:2em; }
input {text-indent:2em; }

</style>

quico5 · #3 (**permalink**) 23/04/2012, 13:34

gracias, también lo había pensado, aunque lo haría en todas las lineas, quizá sea lo mejor

¿porque dices que es así opera?¿acaso suele tener errores puntuales de este tipo?

furoya · #4 (**permalink**) 24/04/2012, 09:48

Empecemos por el final.

Opera tiene esas cosas.
Siempre fue uno de los navegadores más completos y eficientes. Era ideal para los que trabajábamos investigando en páginas web.
No sé qué edad tienes, pero te cuento que hace algunos años, era muy difícil navegar todas las páginas. No solamente por el mal diseño que podían tener, sino porque había sitios "optimizados para..." que usaban código propietario de un browser que no andaba en otro, o peor : porque había imbéciles que si no veías la página con su navegador preferido, ni te dejaban entrar.

El último recurso que usábamos en esos casos era abrir el código fuente y copiar el texto que necesitábamos al Notepad, excluyendo etiquetas, comentarios y adornos ... a mano.

Pero resulta que Opera nos salvó la vida, porque tenía mil herramientas que —una vez aprendidas— te dejaban "cambiar" la resolución de pantalla con un zoom, te modificaba los estilos reemplazando fondos que se mezclaban con el texto (entre otras cosas), bloqueaban escripts "anticopia", y lo más increíble era que si una página no te dejaba entrar porque no usabas Netscape, simplemente le decías a Opera que se identificara como "Netscape", y entrabas.

Ahora bien, un día querías alinear a la derecha un párrafo dentro de un bloque alineado al centro, y no andaba.

Como descargo, se puede decir que al reportar el asunto en un Foro, en 2 ó 3 versiones lo corregían.
Pero para los inventos extraños que solemos hacer por aquí, es un navegador durísimo.
Una orquialgia.

Volviendo al tema original. Tienes razón, no es lo mismo indentar que sangrar un párrafo. Lo que ocurre es que no explicaste para qué lo vas a usar, y en mi imaginación (asociando con el input, que no tiene break) supuse que ibas a numerar cada línea desde atrás del textarea, y que buscabas un espacio para que se viesen los números.

Esto es un engendro, porque no indenta sino que mete una tabulación de prepo al abandonar el cuadro. Pero si te sirve ...

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>SIMULA text-indent EN textarea OPERA.</title>
<script type="text/javascript">

function indenta(T){
if (navigator.userAgent.indexOf("Opera")!=-1){
var alfa = T.value;
var tab = /\t/g;
var salto = /\r\n/g;
alfa = alfa.replace(tab, "").replace(salto, "\r\n\t");
alfa = "\t" + alfa;

T.value = alfa;
}
}
</script>
<style type="text/css">

textarea {text-indent:2em; height: 5em; width: 20em; }

</style>
</head>
<body>
<h2>Muestra un a tabulación al comienzo de cada párrafo cuando se abandona el 
<code>textarea</code>. (Opera)</h2>

<textarea id=txtr onblur=indenta(this)></textarea>
</body>
</html>

emprear · #5 (**permalink**) 24/04/2012, 10:30

@quico5

Para que querés hacer eso exactamente? es una cuestión visual? o despues el textarea es procesado por un formulario?
Php, por ejemplo, no te va a reconocer el indent com espacios en blanco.
Interesante, como de costumbre, la solución de @furoya

Aqui te propongo otra

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function editable(){
var texto = document.getElementById('texto').innerText;
document.getElementById('contenido').value = texto;
 
}
//]]>
</script>
</head>
<body>
 
<form action="editable.php" method="post" onsubmit="return editable();">
<div id="texto" contenteditable="true" style="width: 400px; height: 400px;text-indent: 2em;border: solid 1px #333333"></div>
<input type="hidden" value="" id="contenido" name="contenido" />
<input type="submit" />
</form>
</body>
</html>

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<?php
$texto = $_POST['contenido'];
file_put_contents('editable.txt',$texto);
?>
<div>
<?php echo "$texto"; ?>
</div>
</body>
</html>

Es decir, transformas el div en una suerte de textarea. Y pasas el valor en un campo hidden.
Aunque aqui, el que hace de las suyas es Firefox, ya que el comportamiento es más parecido a un editor de texto, enter te genera un nuevo parrafo y Shift+mas enter sólo una nueva linea en opera, Chrome e IE, pafa FF son solo nuevas lineas.
También podés reformatear el valor del post con el mismo php

Saludos

quico5 · #6 (**permalink**) 24/04/2012, 16:10

Perdonad que no pusiese la web www.anhida.org/portal/

he usado un pequeño portal hecho con HTML5 y le hecho pequeños cambios
el formulario esta en todas las paginas

solo es un tema visual, el motivo es que se me ocurrió usar la validación de HTML5 y CSS3 con el formulario, con lo cual tengo un icono al comienzo de las cajas indicando si la caja esta bien cuvierta, en Oprera el texto pasa por encima

voy a probar vuestros codigos

gracias por la ayuda

quico5 · #7 (**permalink**) 24/04/2012, 16:24

con el div funciona muy bien, al escribir salta al tabulado, aunque parece que no soporta required, seguire provando aver

furoya · #8 (**permalink**) 24/04/2012, 18:36

Gracias, emprear.
Y de nada, quico5.

El método de simular un textarea usando otro bloque editable me parece más práctico para este caso. Hasta que arreglen ese tema en el Opera.
O, lo que también puede ser, se simula la indentación con caracteres que hay que checkear al salir (o entrar) en el editable, y después se limpian al enviarlos, o mejor en el mismo PHP, como comentas.

El ejemplo que dejé ya para esto no anda bien, y necesitaría algún ajuste. Para empezar, se me ocurrió "indentar" cada párrafo, pero CSS solamente lo hace con el primero. Habría que corregirlo.

Y lo de Opera ... justo hace poco hablamos de cómo se comporta con editables

textarea ajustable

y se hacía la comparación con IExplorer.

Antes de que me olvide. Muy interesante ese sitio, quico5. Hace un poco más, también hablábamos de accesibilidad y diseño de páginas para personas con déficit de atención. Era sobre el uso del texto justificado.

quico5 · #9 (**permalink**) 25/04/2012, 02:45

gracias furoya

tu ejemplo seria perfecto si tabulase solo al coger el foco y lo perdiese al perder el foco

gracias, me alegro que te guste la web, la asociación la creamos en el 2004 y desde entonces a ratos he ido aprendiendo el tema de las paginas webs, soy TDAH, estoy trabajando en que la web sea cómoda para el visitante y moderna a la vez, necesita algún ajustillo para los móviles, suena interesante la accesibilidad para gente con déficit de atención

por cierto, tengo 31 años

gracias

marim · #10 (**permalink**) 25/04/2012, 04:07

quico5:
Me encantó el contenido de tu web, muy bueno.

Me detuve por aqui porque vis que habias contestado algo furoya, y por lo general siempre es muy creativo en sus repuestas. La propuesta de emprear me gusto tambien, yo estaba segura que contenteditable era cosa de html5 y que no todos los nav. lo soportaban. pero averiguando por ahi lei que ie desde la version 5 lo reconoce

gracias

furoya · #11 (**permalink**) 25/04/2012, 08:02

Cita:

Iniciado por marim

Me detuve por aqui porque vis que habias contestado algo furoya, y por lo general siempre es muy creativo en sus repuestas...

¡Gracias! ¡Ya tengo seguidores!.
Hasta el fanclub y mi nombre en las remeras, no paro.

Y es cierto, quico5, el ejemplo de emprear está mucho mejor; como de costumbre. Lo que pasa es que él se dedica a hacer páginas web, y yo soy un osado al que toleran en estos foros porque ya les da pereza echarme después de tantos años.

Y hablando de años ... sí, es posible que también hayas tenido que soportar la guerra contra Netscape y las campañas contra IExplorer (¡Qué épocas!).

quico5 · #12 (**permalink**) 25/04/2012, 09:23

Gracias furoya

los dos ejemplos son muy buenos, al ejemplo del div le faltaría el overflow:auto; que le funciona porque yo lo tengo usado, lo malo es que no acepta el validador de formularios que hay en HTML5 el cual no se aplica al div y me gusta que podamos validar el formulario antes de poder manarlo, de todas formas como alternativa también valido por php

respecto a tu propuesta creo que se aproxima mas, confió en el potencial de JavaScript, solo habría que hacer como el efecto de :HOVER de CSS y aplicar la tabulación

recuerdo usar NETSCAPE e IE hace años, por aquel entonces era mas popular IE y se podía pensar que NETSCAPE trabajaba mal sin embargo era mas fácil hacer ciertas cosas en NETSCAPE

furoya · #13 (**permalink**) 25/04/2012, 19:12

Lástima que no conozco el funcionamiento de la validación HTML5, pero no creo que sea difícil incluir un div. Seguramente en lugar de leer el value tendrá que ver el innerHTML (como quiera que se llamen en ese lenguaje).

Para que indente siempre, y no sólo cuando pierde el foco, se pueden usar los eventos onmouseover y onmouseout. Y para controlar mejor el "ancho" del espacio libre, se podría usar el caracter de "espacio de un em", que tiene justamente el ancho de 1em. Aunque no sé si estará en todas las fuentes...

Código:

<script type="text/javascript">

function indenta(T){
if (navigator.userAgent.indexOf("Opera")!=-1){
var alfa = T.value;
var ind = /\u2003\u2003/g; // dec 8195
//var salto = /\r\n/g;
alfa = alfa.replace(ind, "")//.replace(salto, "\r\n\u2003\u2003");
alfa = "\u2003\u2003" + alfa;

T.value = alfa;
}
}
</script>

Por supuesto que en los demás navegadores se usa CSS. Esto es un invento puesto acá como una ayuda, porque nadie va a buscar la solución de éste asunto en el foro de JS.

El detalle, por el que claramente es mejor el ejemplo de emprear, aparece al tener que borrar esos caracteres de más al enviar el valor, o al recibirlos en el server. Porque no serían parte del mensaje que te están enviando.

emprear · #14 (**permalink**) 25/04/2012, 20:37

Buen argumento @furoya, pero, en este tema como en muchos otros que pululan por el foro sigue faltando un argumento, se dice lo que se quiere hacer, pero no el para qué, en concreto, en este caso

mandar un email?
popular una base de datos con comentarios?
grabar un archivo de texto?
generar un html?
que el usuario simplemente vea la indentación?

Si fuese cualquiera de las cuatro primeras, para lo cual en definitiva vamos a tener que hacer uso de un lenguaje del lado del servidor, php en mi caso, creo que habría que simplificar las cosas, y manipular el formato con el mismo php, sobre todo en un comportamiento, que, trás las muchas pruebas que he hecho, es completamente irregular de un navegador a otro, y no solo me refiero a Opera.
Como sea y para terminar, dejo algunos cambios a mi primer script, dado que me percaté de que innerText no es soportado por firefox.
La que sigue es la que logra un comportamiento más parecido (no igual) en los diferentes navgadores

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<script type="text/javascript">
//<![CDATA[
function editable(){
    
if (/Firefox/i.test(navigator.userAgent)){
var texto = document.getElementById('texto').innerHTML;
}else{
var texto = document.getElementById('texto').innerText;
}
    
document.getElementById('contenido').value = texto;
 
}
//]]>
</script>
</head>
<body>
 
<form action="editable.php" method="post" onsubmit="return editable();">
<div id="texto" contenteditable="true" style="width: 400px; height: 400px;text-indent: 2em;border: solid 1px #333333"></div>
<input type="hidden" value="" id="contenido" name="contenido" />
<input type="submit" />
</form>
</body>
</html>

Código PHP:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<?php
$texto = $_POST['contenido'];
$texto = str_replace('<br>',"\n",$texto);
file_put_contents('editable.txt',$texto);
?>
<div>
<?php echo "$texto"; ?>
</div>
</body>
</html>

No se podrá quejar @quico5, que no tendrá oportunidad de aburrirse con nuestras disquicisiones.

Saludos

IsaBelM · #15 (**permalink**) 26/04/2012, 04:59

Cita:

Iniciado por emprear

Como sea y para terminar, dejo algunos cambios a mi primer script, dado que me percaté de que innerText no es soportado por firefox.

prueba con la propiedad textContent que es equivalente a innerText para todos los navegadores menos para ie8-

quico5 · #16 (**permalink**) 26/04/2012, 06:21

Jejeje, no se que significa disquicisiones, emprear, es para mandar un email

he probado sobre el DIV "REQUIRED" de HTML5 para que no se pueda mandar vacio pero no lo coje, me gusta la idea que HTML5 no permita mandar el email si no se cubre bien

--------------------------------------

creo que es lo de menos si se envía con espacios en mensaje del email, puedo sacarlos por PHP, uso HTML5 para validar los input y los textarear para que no se pueda mandar el email si no estan bien cubiertos

--------------------------------------

www.anhida.org

--------------------------------------

html5 con input

Código HTML:

 <input required type="text"  title="Asunto: Titulo" name="asunto" style="width:100%;" type="text" placeholder="Asunto: Titulo" maxlength="30" />

uso REQUIRED para que no se pueda mandar el campo vació o mal rellenado
uso PLACEHOLDER para poner un mensaje dentor de los INPUT como se hacia en JS mientras los INPUT están vacíos
pattern="[a-zA-Z0-9.+_-]{2,25}@[a-zA-Z0-9.-]{2,15}\.[a-zA-Z0-9.-]{2,9}" y con esto fuerzo un formato para los emails, cantidad de caracteres, etc
--------------------------------------

pongo el codigo completo de como lo tengo

index.html

Código:

<!DOCTYPE>

<html>

 <head>

  <title>Ejemplo de envío de formulario por email con php</title>

  <meta name="description" content="Formulario de contacto enviado por correo electronico usando php"/>

  
  <style>
	@media not screen and (1){.div{margin-right:4px;}}
	input, select, textarea{margin:2px 0;}
	input:required:invalid, textarea:required:invalid {border: 1px solid red; background:rgba(255, 0, 0, 0.05);}
	input:required:valid, textarea:required:valid {border: 1px solid green; background:rgba(0, 255, 0, 0.05);}
	
	input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid {
	  font-family: 'Comic Sans MS', cursive;
	  font-size:12px;
      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC');
      background-position: 5px top;
      background-repeat: no-repeat;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      -o-box-shadow: none;
      -ms-box-shadow: none;
      box-shadow: none;
	  text-indent: 18px;
    }
      input:required:valid, textarea:required:valid {
      font-family: 'Comic Sans MS', cursive;
	  font-size:12px;
	  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=');
      background-position: 5px top;
      background-repeat: no-repeat;
	  text-indent: 18px;
    }
	form{border:1px solid silver; padding:2px 4px; margin:0px;}
  </style>
  
  </head>

<body>


<b>Escribenos:</b>
 <div id="formulario">

  <form action="enviar.php" method="POST">
    <!--[if IE]><label>Nombre:</label><![endif]-->
    <input required type="text" title="Nombre: Julio Verne" name="nombre" style="width:100%;" type="text" placeholder="Nombre: Julio Verne" maxlength="30" />
    <!--[if IE]><label>Email:</label><![endif]-->
    <div class="div"><input required title="Email: [email protected]" type="email" name="email" style="width:100%;" type="text" placeholder="Email: [email protected]" maxlength="40" pattern="[a-zA-Z0-9.+_-]{2,25}@[a-zA-Z0-9.-]{2,15}\.[a-zA-Z0-9.-]{2,9}" /></div>
    <!--[if IE]><label>Asunto:</label><![endif]-->
    <input required type="text"  title="Asunto: Titulo" name="asunto" style="width:100%;" type="text" placeholder="Asunto: Titulo" maxlength="30" />
    <!--[if IE]><label>Mensaje:</label><![endif]-->
    <textarea required style="width:100%;" rows="6"  title="Mensaje: Texto de prueba" name="mensaje" placeholder="Mensaje: Texto de prueba" maxlength="" ></textarea>
    
    <select name="para" style="width:100%;">
    <option value="[email protected]">Anhida Vigo</option>
    <option value="[email protected]">Anhida FerrolTerra</option>
    <option value="[email protected]">Anhida Coru&ntilde;a</option>
    <option value="[email protected]">Webmaster</option>
    </select>
	<br/>
    <input name="enviar" type="submit" value="Enviar" style="width:50%;" /><input name="reset" type="reset" value="Borrar" style="width:50%;" />
  </form>
 </div>
</body>
</html>

enviar.php

Código:

<?php

  //variable de validacion

  $valida = true;

  if (empty($_POST['nombre'])) {

    echo "<b>No se especifico nombre</b><br/>";

    $valida = false;

  }
  
  if (empty($_POST['email'])) {
   echo "<b>No se especifico E - mail</b><br/>";
   
   $valida = false;

  }

  if (empty($_POST['asunto'])) {

   echo "<b>No se especifico asunto</b><br/>";

   $valida = false;

  }

  if (empty($_POST['mensaje'])) {

   echo "<b>Por favor, no envie un mensaje en blanco</b><br/>";

   $valida = false;

  }

  // Validamos la direccion de correo electronico

  if (!strchr($_POST['email'],"@") || !strchr($_POST['email'],"."))
   {

    echo "<b>No es un correo valido</b><br/>";

    $valida = false;

   }

  // Si las comprobaciones son correctas

  if ($valida == true)

   {

    // Creamos el header para el mensaje

    // para:

    $to = $_POST['para'];

    // Asunto

    $subject = $_POST['asunto'];

    // Cabeceras del mail (Content-Type y demas info)

    $headers = "MIME-Version: 1.0\n";

    $headers .= "Content-type: text/html; charset=utf-8\n";

    // El From: en la forma Nombre <[email protected]>, esto garantiza que

    // el receptor vea solo el nombre de quien envia

    $headers .= "From: ".$_POST['nombre']." <".$_POST['email'].">\n";

    // Opcional: Resopnder a:

    $headers .= "Reply-To: " . $_POST['email']."\n";

    //Opcional X-Mailer

    $headers .= "X-Mailer: PHP/" . phpversion();

    // Cuerpo del email

    $message = $_POST['mensaje'];

    if(mail($to, $subject, $message,$headers))
     {

      echo "<p>Email enviado correctamente.</p>";

     }else{
	  echo "Corrija el formulario.<br/>en unos segundos vera el formulario<nr/>[email protected]";
	 }

   }

?>

<script type="text/javascript">
//<![CDATA[
/* script */
function ai(){
location.replace('index.php');// --> aqui la página que contiene el form
}
var t = setTimeout('ai()', 10000);
//]]>
</script>

quico5 · #17 (**permalink**) 26/04/2012, 07:13

Me ha gustado probar vuestras sugerencias, parece que lo mas sencillo es como me recomienda furoya, se aplica a todas las lineas pero para el visitante no tendrá defecto, me gustaba mas que solo se aplicase a la primera linea junto la validación de HTML5, pero bueno a veces hay que adaptarse a las opciones secundarias

@media not screen and (1){textarea{padding-left:20px;}} /*Solo soportado en Opera*/

emprear · #18 (**permalink**) 26/04/2012, 07:47

Cita:

Iniciado por IsaBelM

prueba con la propiedad textContent que es equivalente a innerText para todos los navegadores menos para ie8-

Ya la habia probado previamente, pero no reconoce los saltos de linea

AAAA
BBB
CCC
se convierte en

AAABBBCCC.

@quico5
el atributo required se aplica a los campos de formulario, en todo caso, se lo deberías aplicar al campo hidden de name contenido. Probalo, para ser sincero jamás de lo aplique a un hidden. Igualmente podés sencillamente comprobar con javascript si el contenido del div es "" ó no.

Y si es para mandar un email, na vez más, podés agregar espacios /sangrias con el php.
Saludos

IsaBelM · #19 (**permalink**) 26/04/2012, 13:46

Cita:

Iniciado por emprear

Ya la habia probado previamente, pero no reconoce los saltos de linea

AAAA
BBB
CCC
se convierte en

AAABBBCCC.

bueno es que pensaba que se trataba de ello. innerText y textContent sólo aceptan texto plano. si el objetivo es que acepte html, entonces ha de usarse innerHTML

por otro lado no es recomendable usar navigator.userAgent para comprobar el navegador ya que puede que dentro de x versiones ese navegador deje de aceptar lo que ahora acepta y acepte lo que ahora no acepta. por lo tanto lo recomendable es usar try ... catch

emprear · #20 (**permalink**) 26/04/2012, 15:11

if (/Firefox/i.test(navigator.userAgent))
lo aplico especificamente a esta script, a esta altura,dado que textContent está soportado desde Firefox 1.5, creo que es suficiente

quico5 · #21 (**permalink**) 26/04/2012, 15:12

@emprear

el atributo required se aplica a los campos de formulario
--lo se pero sobre el div no funciona teniendolo dentro del formulario

¿campo hidden? supongo que te refieres a ocultar el textarea en opera

creo que no te entiendo

emprear · #22 (**permalink**) 26/04/2012, 16:39

@quico5:

El atributo required no es soportado por IE, tendrías que recurrir alguna script auxiliar, http://code.google.com/p/webforms2/ por ejemplo

En cuanto a usar el div, como te lo indiqué yo, está muy lindo para el tema del indent, pero validarlo es algo muy complicado.

Después de numerosas pruebas que hice, yo te recomendaría que simplemente apliques el indent en el css, y hagas caso omiso de Opera

Saludos

furoya · #23 (**permalink**) 27/04/2012, 12:36

Cita:

Iniciado por emprear

Buen argumento @furoya, pero, en este tema como en muchos otros que pululan por el foro sigue faltando un argumento, se dice lo que se quiere hacer, pero no el para qué, en concreto, en este caso

mandar un email?
popular una base de datos con comentarios?
grabar un archivo de texto?
generar un html?
que el usuario simplemente vea la indentación?

Sí, claro. Es algo que —te consta— me preocupa mucho. En este caso no sería tan tajante, porque el tema es que una propiedad CSS válida no está funcionando, más allá de cómo la vayamos a usar.
Ahora, si un textarea debe o no aceptar indentación, ya es una discusión bizantina en la que no pienso entrar.

Cita:

Iniciado por IsaBelM

bueno es que pensaba que se trataba de ello. innerText y textContent sólo aceptan texto plano. si el objetivo es que acepte html, entonces ha de usarse innerHTML

por otro lado no es recomendable usar navigator.userAgent para comprobar el navegador ya que puede que dentro de x versiones ese navegador deje de aceptar lo que ahora acepta y acepte lo que ahora no acepta. por lo tanto lo recomendable es usar try ... catch

Buen consejo lo de no usar navigator.userAgent, IsaBelM. Yo lo uso siempre, porque es más cómodo para los ejemplos, todos entendemos que lo que hace es discriminar un navegador. Después cada uno pone en la vida real el método que quiera. Pero a mí me pareció oportuno que lo mencionaras.

Ah!, y

Código:

AAAA
BBB
CCC

es texto plano. Multilínea, sí, pero no tiene formato.

Cita:

Iniciado por emprear

El atributo required no es soportado por IE, tendrías que recurrir alguna script auxiliar, http://code.google.com/p/webforms2/ por ejemplo

En cuanto a usar el div, como te lo indiqué yo, está muy lindo para el tema del indent, pero validarlo es algo muy complicado.

Y no. Así no conviene. El comentario que hice más arriba está fuera de lugar.

Aprovecho el offtopic y además de meter JS en un foro de CSS, también comento sobre accesibilidad.
En uno de mis primeros post en el tema hablé de otro donde debatimos sobre página hechas pensando en personas con défict atencional. No se dijo gran cosa, pero ya que estoy dejo el enlace

Desaconsejar texto justificado

En la web hay más datos

http://scholar.google.com.ar/scholar...ed=0CBwQgQMwAA

Y metiendo en gugl

"texto justificado" deficit atencion texto justificado

aparece más.

No los leí, pero supongo que explicarán sobre hacer diseños en cuadros o bloques pequeños y con límites bien definidos; separando la información en párrafos cortos, con letra grande, evitando que en la ventana se vean banners, botones, cualquier elemento que rompa la "monotonía" general y desvíe la atención del texto que se deba leer.

Un día voy a pasar por el Foro de Accesibilidad para ver qué adelantos hay en el tema de diseños específicos. En mis años mozos, la única diferencia que se hacía era con la "página imprimible". El resto se lo dejaban a los navegadores ... como Opera.

IsaBelM · #24 (**permalink**) 27/04/2012, 15:18

Cita:

Iniciado por emprear

if (/Firefox/i.test(navigator.userAgent))
lo aplico especificamente a esta script, a esta altura,dado que textContent está soportado desde Firefox 1.5, creo que es suficiente

no comprendo la relación que has hecho

veamos si extendiéndome un poco más, logro hacerme entender.
en este ámbito, evitar verificar el navegador o versión de este, javascript es muy versátil

el mencionado try .... catch

Cita:

try{
evt.preventDefault();
}catch(e){
evt.returnValue = false;
}

condicional terciario

Cita:

var key = (e) ? e.keyCode : e.charCode;

condicionar propiedad o método

Cita:

if (elemento.addEventListener) {
.....
} else {
.....
}

hacer un fallback con el operador or (||)

Cita:

var adyacente = elem.nextElementSibling || elem.nextSibling.nextSibling

de cualquiera de estas maneras hemos cubierto todos los navegadores y sus versiones pasadas, presente y casi con seguridad futuras

como he metido el tobillo en este tema, me zambulliré y seré más pragmática en la solución al problema

a la recepción del valor del control se la concatena espacios usando entidades (imprimir por pantalla, envío email)

Cita:

$valor = '      '.$_POST['c'];

esto mismo se puede hacer con chr(160)

o simplemente cuando se vaya a imprimir por pantalla se le aplica text-indent al elemento

pero respondamos al tema

Cita:

Iniciado por quico5

Me ha gustado probar vuestras sugerencias, parece que lo mas sencillo es como me recomienda furoya, se aplica a todas las lineas pero para el visitante no tendrá defecto, me gustaba mas que solo se aplicase a la primera linea junto la validación de HTML5, pero bueno a veces hay que adaptarse a las opciones secundarias

con este otro, sólo se aplica a la primera línea. aunque parece que te ha dado pereza leer

Cita:

no te habia visto

Cita:

Iniciado por furoya

Ah!, y

Código:

AAAA
BBB
CCC

es texto plano. Multilínea, sí, pero no tiene formato.

con texto plano me refería a que textContent e innerText no insertan html

quico5 · #25 (**permalink**) 27/04/2012, 15:51

Cita:

El atributo required no es soportado por IE, tendrías que recurrir alguna script auxiliar, http://code.google.com/p/webforms2/ por ejemplo

El atributo required es soportado por IE9, lo se por como se comportan :VALID e :INVALID de CSS3

En la versión 9 de IE funcionan bastante bien CSS3 y HTML5, la verdad es que estoy quedando impresionado a presar de defectos menores en cosas muy puntulales

en IE8 e inferiores valido por PHP, pero bueno, no siempre es importante optimizar hasta el detalle mas remoto en cada navegador

emprear · #26 (**permalink**) 27/04/2012, 17:38

Cita:

Iniciado por IsaBelM

no comprendo la relación que has hecho

La relación es muy simple, el ejemplo que puse es "Ad hoc". Se aplica al problema planteado. Tal cual lo interpreta @furoya en

Cita:

Yo lo uso siempre, porque es más cómodo para los ejemplos, todos entendemos que lo que hace es discriminar un navegador. Después cada uno pone en la vida real el método que quiera

Así como ya no diseño para IE5, y tampoco lo hago para versiones obsoletas de Firefox, siendo que textContent es soportado, como ya señale, desde FF 1.5,

Código Javascript:

Ver originalif (/Firefox/i.test(navigator.userAgent))...

es suficiente y necesario para el caso que nos ocupa.

No me propuse hacer docencia ni nada por el estilo, por supuesto, bienvenida la docencia ( a propósito. la hacés muy amenamente). Por tanto, la relación que no llegás a comprender, es a mi juicio más que comprensible.

Saludos

furoya · #27 (**permalink**) 27/04/2012, 21:41

Mmmmm.
Creo que empiezo a oler sangre.

Linda colección de métodos javascript para discriminar navegadores por sus capacidades y no por el nombre. El problema va a ser cuando nos baneen a todos por desvirtuar un tema de CSS.

Cita:

Iniciado por IsaBelM

no te habia visto

Sí, no importa, ya estoy acostumbrado. Como te conté alguna vez, que las mujeres me ignoren es la versión corta de la historia de mi vida.

(Estaba pensando ... ¿de casualidad eres psicóloga?. Porque ya van varias veces que te estoy contando "historias de mi vida")

Un detalle banal, insignificante : el caracter 'emsp' no es lo mismo que un 'nbsp' y mucho menos que un espacio vulgar y silvestre. La idea de usarlo no viene solamente de su tamaño (igual a un em de ancho) sino a que es practicamente imposible que el usuario lo vaya a tipear. Al reemplazarlo, podemos dejar las tabulaciones, los espacios (comunes) multiples y hasta los de "no separación" que sí puede llegar a escribir en le formulario. Digo, por el ejemplo en PHP o expresiones regulares, que si no entiendo mal, borran otra cosa.

Al final me parece que la decisión que tomaste es la mejor, quico5. Sería solamente CSS y en Opera igual se entiende.

IsaBelM · #28 (**permalink**) 29/04/2012, 07:54

de perdidos al rio

Cita:

Iniciado por emprear

Cita:

Yo lo uso siempre, porque es más cómodo para los ejemplos, todos entendemos que lo que hace es discriminar un navegador. Después cada uno pone en la vida real el método que quiera

Cita:

Iniciado por furoya

Mmmmm.
Creo que empiezo a oler sangre.
no serás un tiburon??

la experiencia es un grado.

Sí, no importa, ya estoy acostumbrado. Como te conté alguna vez, que las mujeres me ignoren es la versión corta de la historia de mi vida.
no ha sido el caso. no te ignoré, simplemente leí el post de emprear y me puse a redactar. después, cuando publiqué, vi tu post

(Estaba pensando ... ¿de casualidad eres psicóloga?. Porque ya van varias veces que te estoy contando "historias de mi vida")
te contaré la verdad. en mis post hay un mensaje siblimimal que hace que me cuentes tu vida. soy licenciada en antropología

parece que a mi también me afecta