[SOLUCIONADO] Mostrar y Ocultar una parte de un div contenteditable y dar foco

giancarlos92 · #1 (**permalink**) 25/03/2013, 15:12

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>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
#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;
}
</style>
<script language="javascript">
 
function validaclick(sel){
    var seleccionado=sel;
sel.innerHTML="";
document.getElementById('textarea').focus();
}
</script>
</head>
<body>
    <div align="left">
    <div id="textarea" align="left" contenteditable>
    <div title="Breve descripción del motivo de la llamada">Consulta del cliente:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<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:&nbsp;<font color=#AAAAAA onclick="validaclick(this)">En que termino la llamada (Resuelto – Avería – Espejo – Incidencia con sus equipos – etc.)</font></div>
    </div>
    </div>
</body>
</html>

emprear · #2 (**permalink**) 25/03/2013, 16:18

Hay algo que no me queda claro, hay que restablecer todo el texto?
A ver si esto te sirve, primero, permitime reemplazar esos obsoletos tag font por uns span.
Luego, al cargar la página , guardamos el texto original en una variable

Código Javascript:

Ver originalwindow.onload = function(){
texto_original = document.getElementById('textarea').innerHTML;
}

la cual previamente declaramos en forma global al inicio de l script. Luego, en tu div contenedora

Código HTML:

Ver original<div id="textarea" align="left" contenteditable onblur="this.innerHTML= texto_original;";>

Y nos queda

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
#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;
}
span.aaa{
color: #AAAAAA;
}
</style>
<script language="javascript">
var texto_original;
function validaclick(sel){
var seleccionado=sel;
sel.innerHTML="";
document.getElementById('textarea').focus();
}
 
window.onload = function(){
texto_original = document.getElementById('textarea').innerHTML;
}
 
 
</script>
</head>
<body>
    <div align="left">
    <div id="textarea" align="left" contenteditable onblur="this.innerHTML= texto_original;";>
    <div title="Breve descripción del motivo de la llamada">Consulta del cliente:&nbsp;<span class="aaa" onclick="validaclick(this)">Breve descripción del motivo de la llamada</span></div>
    <div title="Que deduces de la información de las aplicaciones y lo que menciona el cliente">Análisis:&nbsp;<span class="aaa" onclick="validaclick(this)">Que deduces de la información de las aplicaciones y lo que menciona el cliente</span></div>
    <div title="Nº consulta – Nombre – Nº contacto – sacar información de contactos anteriores – CPSA y confirmarlos">Datos iniciales:&nbsp;<span class="aaa" onclick="validaclick(this)">Nº consulta – Nombre – Nº contacto – sacar información de contactos anteriores – CPSA y confirmarlos</span></div>
    <div title="estrecha, 3G, Línea ADSL, ADSL Libre, FTTH">Tipo de producto del cliente:&nbsp;<span class="aaa" onclick="validaclick(this)">estrecha, 3G, Línea ADSL, ADSL Libre, FTTH</span></div>
    <div title="SI: confirmar todos los datos necesarios">Contactos anteriores:&nbsp;<span class="aaa" onclick="validaclick(this)">SI: confirmar todos los datos necesarios</span></div>
    <div title="delante de equipos, jalones, averías, masiva, PC adicional, Reinicio de equipos (hora de sinc)">Comprobaciones iniciales:&nbsp;<span class="aaa" onclick="validaclick(this)">delante de equipos, jalones, averías, masiva, PC adicional, Reinicio de equipos (hora de sinc)</span></div>
    <div title="Pruebas realizadas y seguimiento de Intracat">Desarrollo de la llamada:&nbsp;<span class="aaa" onclick="validaclick(this)">Pruebas realizadas y seguimiento de Intracat</span></div>
    <div title="PC – Consola – S.O. – Tipo de conexión – Router. - Firmware del router: Actualizado o no">Datos Equipos:&nbsp;<span class="aaa" onclick="validaclick(this)">PC – Consola – S.O. – Tipo de conexión – Router. - Firmware del router: Actualizado o no</span></div>
    <div title="Información facilitada al cliente del motivo de la incidencia y como se resolvió">Argumentación:&nbsp;<span class="aaa" onclick="validaclick(this)">Información facilitada al cliente del motivo de la incidencia y como se resolvió</span></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:&nbsp;<span class="aaa" 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.)</span></div>
    <div title="En que termino la llamada (Resuelto – Avería – Espejo – Incidencia con sus equipos – etc.)">Diagnostico Final:&nbsp;<span class="aaa" onclick="validaclick(this)">En que termino la llamada (Resuelto – Avería – Espejo – Incidencia con sus equipos – etc.)</span></div>
    </div>
    </div>
</body>
</html>

En IE 7/8/9 funciona, en el 6, no tengo forma de probarlo

Saludos y Bienvenido a Foros del Web

giancarlos92 · #3 (**permalink**) 26/03/2013, 02:48

Hola emprear, disculpa por no haber sido más específico. Lo que deseo es que si en la primera línea, alguien le da click al texto en gris (#AAAAAA), entonces desaparezca el texto gris de dicha línea(lo cual ya esta), ahora si en ese momento deseo saltar o irme a otra línea, por ejemplo si no escribí nada en la primera línea y me voy a la segunda línea (le doy click), entonces me vuelva a aparecer lo que estaba escrito en gris en la primera línea, además me desaparezca lo gris de la 2da línea y quede el foco en la 2da línea parte gris.
Y así con cada div o línea de forma independiente. He intentado guardar el texto de cada span en la función que llama el onload y luego llamar al onblur en cada span para reponer su texto cuando esté fuera o en otra línea, pero no me sale.

No quiero que me reponga todo el texto gris del textarea, solo que me reponga de aquel span en el que no haya escrito nada y solo cuando esté fuera del foco.

Necesito que esta pequeña página sirva como guía a chicos que seguirán unos pasos Paso1, Paso2, etc, los cuales pueden saltearse. Pero esos espacios gris son editables, por lo que no quiero que el texto se reponga si ya han escrito algo en determinada línea.

Si deseas alguna info adicional o no me expliqué bien me avisan. Gracias por tu tiempo.

He puesto el código más simple, ya que solo quiero la idea y yo me las arreglo con el resto:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
#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;
}
span.aaa{
color: #AAAAAA;
}
</style>
<script language="javascript">
var texto_original;
function validaclick(sel){
var seleccionado=sel;
sel.innerHTML="";
document.getElementById('textarea').focus();
}
 
window.onload = function(){
texto_original = document.getElementById('textarea').innerHTML;
}
</script>
</head>
<body>
    <div align="left">
    <div id="textarea" align="left" contenteditable onblur="this.innerHTML= texto_original;";>
    <div>Paso 1:&nbsp;<span class="aaa" onclick="validaclick(this)">Texto guía 1</span></div>
    <div>Paso 2:&nbsp;<span class="aaa" onclick="validaclick(this)">Texto guia 2</span></div>
    <div>Paso 3:&nbsp;<span class="aaa" onclick="validaclick(this)">Texto guia 3</span></div>
    </div>
    </div>
</body>
</html>

emprear · #4 (**permalink**) 26/03/2013, 10:38

De alguna manera me lo figuraba.
Bueno, no sería tan complicado, vamos a usar 2 funciones, una onclick y otra onblur, y para que capture el onblur, vamos a hacer contenteditable a cada uno de los span individualmente

Al hacer click recupera el valor actual del texto en el span (por defecto linea 1, linea 2, etc) si se han hecho ediciones, recuperará el último texto ingresado, al hacer blur, recorremos todos los span, y al que encuentre con innerHTML == "", le pone el último texto capturado con el click. Como nunca va a haber más de una linea vacía, es evidente que el texto que se capturó va a corresponder a la linea vacía, que es la última que se capturó. Dicho en palabras parece complejo, pero fijate

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
#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;
}
span.aaa{
color: #AAAAAA;
}
</style>
<script type="text/javascript">
var texto_original;
 
function validaclick(spa){
texto_original = spa.innerHTML; 
spa.innerHTML="";
}
 
function recuperaTexto(){
var contenedor = document.getElementById('textarea');
var losSpan = contenedor.getElementsByTagName('span');
    for (i=0; i<losSpan.length; i++) {
    if(losSpan[i].innerHTML == ""){
    losSpan[i].innerHTML = texto_original;
    }
 
    }
}
 
</script>
</head>
<body>
    <div align="left">
    <div id="textarea" align="left">
    <div title="Breve descripción del motivo de la llamada">Consulta del cliente:&nbsp;<span contenteditable class="aaa" onclick="validaclick(this)" onblur="recuperaTexto(this);">linea 1</span></div>
    <div title="Que deduces de la información de las aplicaciones y lo que menciona el cliente">Análisis:&nbsp;<span contenteditable class="aaa" onclick="validaclick(this)" onblur="recuperaTexto(this);">linea 2</span></div>
    <div title="Nº consulta – Nombre – Nº contacto – sacar información de contactos anteriores – CPSA y confirmarlos">Datos iniciales:&nbsp;<span contenteditable class="aaa" onclick="validaclick(this)" onblur="recuperaTexto(this);">linea 3</span></div>
    </div>
    </div>
</body>
</html>

Se puede optimizar haciendo un addEventListener para agregar los eventos, pero bueno, así como está funciona. (ie7/8 incluídos)

Saludos

giancarlos92 · #5 (**permalink**) 27/03/2013, 03:48

Emprear, sos lo máximo.
Gracias por tu pronta respuesta, sos un capo.
Lo has hecho supersencillo y entendible, no sabía bien eso del onblur en los span.
Prometo replicar lo aprendido con el resto de programadores de mi trabajo y con quien pueda o necesite algo similar. Prometo estudiar más javascript que no domino mucho o casi nada.

Una vez más gracias!!!.

skumblue · #6 (**permalink**) 27/04/2013, 14:15

Tengo un div contenteditable="true", y bueno necesito posicionar el cursor en una parte determinada del contenido del div, porfavor necesito eso urgente !

Muchas gracias

emprear · #7 (**permalink**) 27/04/2013, 14:21

Cita:

Iniciado por skumblue

Tengo un div contenteditable="true", y bueno necesito posicionar el cursor en una parte determinada del contenido del div, porfavor necesito eso urgente !

Muchas gracias

Las urgencias son para el hospital, y dejá de repetir el tema por todas partes que lo único que vas a conseguir es perjudicarte
http://www.forosdelweb.com/f13/posic...o-div-1048886/
http://www.forosdelweb.com/f13/posic...-input-507927/
http://www.forosdelweb.com/f179/sabe...tarea-1027602/