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>
#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;
}
<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;
}
<div id="textarea" align="left" contenteditable onblur="this.innerHTML= texto_original;";> <div>Paso 1:
<span class="aaa" onclick="validaclick(this)">Texto guía 1
</span></div> <div>Paso 2:
<span class="aaa" onclick="validaclick(this)">Texto guia 2
</span></div> <div>Paso 3:
<span class="aaa" onclick="validaclick(this)">Texto guia 3
</span></div>