HTML, CSS, JS: div contentado con contenido líder permanente

Tengo una div contenida, algo así como:

 

Lo que me gustaría es colocar otro div (o span, no editable) al comienzo de #text , donde el usuario no puede insertar texto antes, o incluso mover el cursor antes que él.

Probé variaciones de:

 
This is some leader

Aquí puede ver una versión en ejecución de esta configuración.

Una cosa que notará es que he insertado un carácter en blanco después del . Sin él, el cursor (zanahoria) no se muestra correctamente, ni en el lugar equivocado, ni en absoluto.

No estoy seguro de por qué, pero en el violín que proporcioné, no puedes borrar (retroceder) el contenido del span . Cuando tengo este html idéntico ejecutándose en mi navegador, desde un archivo HTML, puedo eliminarlo. Me gustaría que el usuario pueda eliminarlo, si lo desea, pero no permitir que se inserte nada delante de él. Debería eliminar todo de una vez: está allí como un grupo (incluido el ), o no está en absoluto. De ahí el contenteditable="false" .

EDIT 1

Parece que el problema de no eliminar es puramente la forma en que se escribe el HTML. He creado una nueva publicación aquí comentando sobre ella. Ese problema está resuelto, pero el problema más grande aquí todavía está maduro.

/ EDIT 1

Lo más cerca que he estado, usando JS, es algo así como:

 $('#testing').on('keyup', function(e){ if($(this).html().indexOf(... leader ...) == 3){ // Needs to be 3, because the actual content of an editable div has markup in it }else{ var splits = $(this).html().split(... leader ...); $(this).html(... leader ...); for(var i = 0; i < splits.length; i++){ $(this).append(splits[i]); } } }); 

que puedes ver corriendo aquí .

Lo que hace es verificar si el bit deseado está en la parte delantera. Si no, divide el contenido y lo reorganiza para que el bit deseado vuelva al principio.

Es super buggy, tiene un rezago después de la tecla e imprime el caracter antes de moverlo. Tampoco funciona para el elemento deseado previamente discutido, y también mantiene el cursor al inicio del campo de entrada si comenzó allí.

Lo siento si lo he presentado de manera confusa. Estoy intentando pensar en un servicio que ofrezca la misma funcionalidad, pero no puedo pensar en ninguno de los dos. FaceBook tiene algo similar , cuando escribes el nombre de un amigo en un cuadro de comentario, pero el contenido es editable y puede estar en cualquier parte de la entrada. Mostrado a continuación:

FB leading

FB medio

¿Pensamientos? ¡Cualquier cosa para llevarme en la dirección correcta es bienvenida!

Mira mi pregunta aquí: HTML contento con islas no editables

Hay dos soluciones posibles. Una de ellas es reemplazar esto:

 This is some leader 

por esto

  

¡SOLUCIÓN!

Tada! <- Enlace a Fiddle (si es demasiado sutil)

Esta chica hace EXACTAMENTE lo que me gustaría que hiciera, sin hacer preguntas.

En primer lugar, agradezcamos esta publicación y esta publicación por ponernos en el camino correcto.

Ahora, cómo funciona:

HTML

Bastante fácil configuración aquí, casi idéntica a lo que tenía originalmente, pero ahora una sola línea.

 
Something something

¡¡NOTA!! Si desea poder eliminar el , DEBE poner todo en una sola línea. Consulte EDIT 1 .

CSS

Nada especial acerca de esto, funcionaría con o sin él. Justo como lo configuré, por el momento. Modificar como lo desee.

 #testing { padding: 5px; width: 90%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; color: #3B3B3B; margin: 0px 0px 15px 0px; resize: none; overflow: hidden; background-color: #FAFAFA; line-height: 15px; min-height: 42px; max-height: 160px; outline: none; } .lead { color: #000; background: #ccd; padding: 1px 2px 1px 2px; font-size: 12px; margin-right: 4px; border: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } 

JS

¡Esta es la carne y las papas de todo! No voy a cubrir los fragmentos de código de las dos fonts que mencioné, así que trate con usted mismo.

Variables

 var somethingVisible = true; var somethingsomething = 'Something something​'; var spanContLen = $('.lead').html().length + 1; 

somethingVisible ( sV , en adelante) es hacer un seguimiento de si el elemento es un elemento secundario de la div contenida.

somethingsomething ( ss , de ahora en adelante) es el elemento , en su totalidad.

spanContLen ( scl , en lo sucesivo) es la longitud del texto dentro del elemento , más 1 para el carácter en blanco. Esto se usa para comparar la posición del cursor / cursor.

Y luego el rest …

 $('#testing').on('keydown', function(e){ if(somethingVisible){ var pos = getCaretPosition(this); if(pos < spanContLen){ setPos(this); } if(pos <= spanContLen && e.keyCode == 8){ $('.lead').remove(); somethingVisible = false; } } }).on('keyup', function(e){ if(somethingVisible){ var pos = getCaretPosition(this); if(pos < spanContLen){ setPos(this); } } }).on('click', function(e){ if(somethingVisible){ var pos = getCaretPosition(this); if(pos < spanContLen){ setPos(this); } } }); 

No está mal, ¿eh?

Basicamente funciona de esta manera:

  • Si el usuario escribe, o hace clic, en una posición inferior a sol , mueva el cursor al primer punto después del .
  • La keydown es particularmente buena para evitar que el usuario sea un ninja, donde presionan una tecla de carácter casi simultáneamente como la flecha hacia arriba (esto tiene el efecto de colocar un carácter antes del antes de que el cursor haya sido retrocedido programáticamente)
  • Si el cursor está en la posición scl , o más bajo, y el usuario presiona la tecla de retroceso ( keyCode == 8 clave keyCode == 8 ), elimine el elemento y establezca sV en falso.

No es perfecto, estoy seguro, pero funciona como me gustaría. Un usuario podría ser un gigantesco trasero abierto y desactivar su JS para moverse por el sistema. Ahí es donde necesita desinfectar su información (¡duh!) Para asegurarse de que su usuario no intente arruinar sus cosas.

En el violín vinculado anteriormente, el botón "Agregar de nuevo" está allí simplemente para insertar un nuevo elemento , si elige eliminar el stock.

Creo que podría agregar un botón o algo dentro del , ¿para qué quitarlo con un clic? U otras cosas Pero eso es todo tarea para ti.