Hola,
No consigo que salga del todo bien. Necesito que la parte escrita de gris dentro del div pueda desaparecer si le doy click encima y aparecer nuevamente si le doy click fuera. Les dejo el código para que vean como se ve. Lo que no consigo es que aparezca nuevamente si salgo del foco de dicho texto. Lo necesito para IE6 al 8 y necesito que sea editable. Es para que las personas lo rellenen, entonces sirve como guia para que sigan un procedimiento, pero la parte gris debe desaparecer si ya escribieron algo o volver a aparecer si van para otra parte del texto.
Código HTML:
Ver original<!DOCTYPE html>
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 2px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 300px;
overflow: auto;
padding: 2px;
resize: both;
width: 1050px;
}
<script language="javascript">
function validaclick(sel){
var seleccionado=sel;
sel.innerHTML="";
document.getElementById('textarea').focus();
}
<div id="textarea" align="left" contenteditable> <div title="Breve descripción del motivo de la llamada">Consulta del cliente:
<font color=#AAAAAA onclick="validaclick(this)">Breve descripción del motivo de la llamada
</font></div> <div title="Que deduces de la información de las aplicaciones y lo que menciona el cliente">Análisis:
<font color=#AAAAAA onclick="validaclick(this)">Que deduces de la información de las aplicaciones y lo que menciona el cliente
</font></div> <div title="Nº consulta – Nombre – Nº contacto – sacar información de contactos anteriores – CPSA y confirmarlos">Datos iniciales:
<font color=#AAAAAA onclick="validaclick(this)">Nº consulta – Nombre – Nº contacto – sacar información de contactos anteriores – CPSA y confirmarlos
</font></div> <div title="estrecha, 3G, Línea ADSL, ADSL Libre, FTTH">Tipo de producto del cliente:
<font color=#AAAAAA onclick="validaclick(this)">estrecha, 3G, Línea ADSL, ADSL Libre, FTTH
</font></div> <div title="SI: confirmar todos los datos necesarios">Contactos anteriores:
<font color=#AAAAAA onclick="validaclick(this)">SI: confirmar todos los datos necesarios
</font></div> <div title="delante de equipos, jalones, averías, masiva, PC adicional, Reinicio de equipos (hora de sinc)">Comprobaciones iniciales:
<font color=#AAAAAA onclick="validaclick(this)">delante de equipos, jalones, averías, masiva, PC adicional, Reinicio de equipos (hora de sinc)
</font></div> <div title="Pruebas realizadas y seguimiento de Intracat">Desarrollo de la llamada:
<font color=#AAAAAA onclick="validaclick(this)">Pruebas realizadas y seguimiento de Intracat
</font></div> <div title="PC – Consola – S.O. – Tipo de conexión – Router. - Firmware del router: Actualizado o no">Datos Equipos:
<font color=#AAAAAA onclick="validaclick(this)">PC – Consola – S.O. – Tipo de conexión – Router. - Firmware del router: Actualizado o no
</font></div> <div title="Información facilitada al cliente del motivo de la incidencia y como se resolvió">Argumentación:
<font color=#AAAAAA onclick="validaclick(this)">Información facilitada al cliente del motivo de la incidencia y como se resolvió
</font></div> <div title="Si no puedes resolver la incidencia, que podría hacer el cliente para solucionarlo (buscar foros – descargar alguna aplicación – buscar información en Internet - etc.)">Alternativas de solución:
<font color=#AAAAAA onclick="validaclick(this)">Si no puedes resolver la incidencia, que podría hacer el cliente para solucionarlo (buscar foros – descargar alguna aplicación – buscar información en Internet - etc.)
</font></div> <div title="En que termino la llamada (Resuelto – Avería – Espejo – Incidencia con sus equipos – etc.)">Diagnostico Final:
<font color=#AAAAAA onclick="validaclick(this)">En que termino la llamada (Resuelto – Avería – Espejo – Incidencia con sus equipos – etc.)
</font></div>