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

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