1

Tengo este código:

<span contenteditable="true" id="Texto_publicacion_user_main_click" name="hola" onclick="publicar_usuario_texto();">Publica algo aquí</span>
             <span contenteditable="true" id="Texto_publicacion_user_main" name="hola"></span>

function publicar_usuario_texto() {
    document.getElementById("Texto_publicacion_user_main_click").style.display = "none";
    document.getElementById("Texto_publicacion_user_main").style.display = "block";
    document.getElementById("Texto_publicacion_user_main").focus();

}

Necesito que cuando el usuario deje de seleccionar el elemento se chequee el elemento y si esta vacío que aparezca otro texto pero si por el contrario no está vacío que no pase nada (mantenga el texto que el usuario ingresó)

3 respuestas 3

1

Te pongo una solucion basada en css, sin javascript

span {
  width:30%;
  display: inline-block;
  background:#EEEEEE;
}
span:empty:before{
content:"publica algo"
}
<span contenteditable="true" name="hola">Publica algo aquí</span>
          

0

Utilizando sólo JavaScript podrías deberías agregar un EventListener de focusout para allí chequear si el input está vacío y agregar el texto deseado

Por ejemplo;

    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">

En caso de hacerlo con jQuery podrías hacer lo siguiente;

      $('#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>

Sin embargo, con la poca información que dejas, asumo, que te podría ser útil la propiedad placeholder de un input, por ejemplo;

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

Espero que te sea de utilidad, saludos!

0
0

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.