Cuando un elemento span no contiene texto, rellene con el texto del marcador de posición

Después de una gran respuesta, veo que esto podría ser un posible duplicado de Placeholder en un evento de evento enfocado que se pueda contentar.

Tengo un elemento HTML con contenteditable="true" . Mi objective es tener un campo de ‘entrada’ continuo utilizando el elemento span. Tengo problemas para que el siguiente flujo funcione:

  • El DOM se carga con texto editable y predeterminado de ‘Crear una nueva etiqueta …’
  • Cuando el usuario hace clic en las actualizaciones de texto para decir ‘Comience a escribir …’
  • En la primera pulsación de tecla, elimine el texto y comience a rellenar con la entrada del usuario
  • Si no tiene texto y el usuario todavía está editando, reemplace el texto con ‘Comenzar a escribir …’
  • Si no tiene texto y el usuario no está interactuando, reemplace el texto con ‘Crear una nueva etiqueta …’

Funciona, excepto que cuando el usuario está editando el elemento y borra todo el texto, el elemento se contrae y deja de ser editable. Necesito asegurarme de que siempre haya texto dentro de o necesito encontrar otro método para manejar estos casos

Aquí está el elemento con el que estoy trabajando:
* Nota: Estoy usando jQuery, Bootstrap y FontAwesome

 Make a new tag .. 

Y mi javascript:

 $('#new-tag').click(function(){ if( $(this).data('editing') !== 'active'){ $(this).text('Start typing ..'); } }); // i do it this way because when .text('') is used, the  breaks $('#new-tag').keydown(function(e){ if( $(this).data('editing') !== 'active'){ $(this).text(String.fromCharCode(e.charCode)); } $(this).data('editing','active'); }); $('#new-tag').change(function(){ if( $(this).data('editing') == 'active' && $(this).text() == ''){ $(this).text('Make a new tag ..'); $(this).removeData('editing'); } }); 

¿Alguien puede hacer que esta magia suceda? Aquí hay un violín de lo que he publicado.

Te sugiero que consideres usar CSS:

 span.badge[contenteditable] { display: inline-block; } span.badge[contenteditable]:empty::before { content: 'Make a new tag'; display: inline-block; } span.badge[contenteditable]:empty:focus::before { content: 'Start typing'; } 

Demostración de JS Fiddle .

Y para hacerlo más personalizable, dados los atributos data-* en el HTML:

    

El siguiente CSS utilizará esos atributos personalizados para colocar el texto apropiado:

 span.badge[contenteditable] { display: inline-block; } span.badge[contenteditable]:empty::before { content: attr(data-placeholder); display: inline-block; } span.badge[contenteditable]:empty:focus::before { content: attr(data-focused-advice); } 

Demostración de JS Fiddle .

Referencias:

  • Compatibilidad:
    • Contenido generado por CSS ( ::before / ::after ) .
    • :empty (y otros selectores ‘CSS 3’) .
  • CSS:
    • :empty
    • Contenido generado, numeración automática y listas .

http://jsfiddle.net/rwmoehsc/2/

Añade este css:

 #new-tag { min-width: 150px; display: block; min-height: 20px; } 

Edición: No pierdo la capacidad de editar el elemento en FF 33

Edición 2: Ni en cromo 38