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>
De esta forma se logra lo que necesitas con raw javascript o vanillajs.
Espero sea de ayuda. Un saludo