Como bien dice @JuanSalvadorPortugal en su respuesta podrías solucionar el inconveniente con la propiedad placeholder de HTML si cambias tu elemento <span>
por un elemento <input>
, sin embargo, imagino que estás intentando emular el comportamiento de esta propiedad directamente en tu elemento <span>
mediante javascript.
Podrías utilizar el evento blur
(el cual justamente se activa cuando se pierde el foco del elemento en cuestión) mediante un listener que garantice un chequeo continuo del elemento, entonces al dispararse el evento chequeas si está vacio el elemento (en tu caso un <span>
).
También sería bueno que mejores un poco el css de los elementos
ya que si vas a estar cambiando el texto que tiene internamente sería bueno que el usuario pudiera notarlo, ya que cuando
un <span>
queda vacio el ancho "se reduce" a 0 y para un usuario
común no sería posible notar que está sucediendo a ciencia cierta. De
todas formas le incluí css a tus <span>
en mi solución para que
aprecies los cambios al realizar el onclick y el onblur.
A continuación dejo el código con lo que he comentado anteriormente:
var span= document.getElementById("Texto_publicacion_user_main_click");
function publicar_usuario_texto() {
span.innerHTML ="";
}
span.onblur = function(){
if(span.innerHTML==""){
span.innerHTML ="Otro texto";
}
};
span {
width:30%;
display: inline-block;
background:#EEEEEE;
}
<span contenteditable="true" id="Texto_publicacion_user_main_click" name="hola" onclick="publicar_usuario_texto();">Publica algo aquí</span>
Espero sea de ayuda. Un saludo