Problem with javascript event handling when losing focus of an HTML span element

Using only JavaScript you could add a EventListener of focusout to there check if the input is empty and add the desired text

For example;

    var ejemplo = document.getElementById("ejemplo")
    ejemplo.addEventListener("focusout", funcionEjemplo);
 
    function funcionEjemplo(){

        if(ejemplo.value.length == 0)
        
        {

        ejemplo.value = "Valor!";
        
        }

    }

 <h5>Utilizando JavaSript</h5>
  <input type="text" id="ejemplo">

If you do it with jQuery , you could do the following;

      $('#ejemplo').on('focusout',function(){

        if($(this).val().length == 0)
        {
          $(this).val("Valor!");
        }

      });

  <h5>Utilizando jQuery</h5>
  <input type="text" id="ejemplo">

<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

However, with the little information you leave, I assume, that you could be useful property placeholder of a input , for example;

<input type="text" placeholder="Valor!">

I hope you find it useful, greetings!

As you say @JuanSalvadorPortugal in your answer you could solve the problem with the property placeholder HTML if you change your element <span> by an element <input> , without However, I imagine that you are trying to emulate the behavior of this property directly in your <span> element using javascript.

You could use the event blur (which is just activated when the focus of the element in question is lost) by means of a listener that guarantees a continuous check of the element, then when the event is triggered you check if the element is empty (in your case a <span> ).

  

It would also be good to improve the CSS of the elements a bit    because if you are going to be changing the text that you have internally it would be good if the user could notice it, because when   a <span> remains empty the width "is reduced" to 0 and for a user   common it would not be possible to notice that it is happening for sure. Of   every way I included css to your <span> in my solution so that   appreciate the changes when making the onclick and the onblur.

Next I leave the code with what I have commented previously:

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>
          

I hope it helps. Greetings

I'll give you a solution based on css, without javascript

span {
  width:30%;
  display: inline-block;
  background:#EEEEEE;
}
span:empty:before{
content:"publica algo"
}

<span contenteditable="true" name="hola">Publica algo aquí</span>