Foros del Web - Ver Mensaje Individual - Mostrar y Ocultar una parte de un div contenteditable y dar foco

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