Aquí hay una captura de pantalla de regextester.com :
Los usuarios solo pueden seleccionar los espacios entre los decoradores de patrones preestablecidos, ¿cómo lograr esto? Inspeccioné las hojas de estilo, todavía no tengo ni idea.
Debe utilizar contentEditable
, aquí hay una recreación simplificada de la entrada de regextester :
document.querySelector('.editor').addEventListener('click', e => { e.currentTarget.querySelector('.input').focus(); });
.editor .input { outline: none; } .editor *:not(.input) { opacity: 0.5; user-select: none; }
<div class="editor"> <span>/</span> <span class="input" contentEditable="true"></span> <span>/g</span> </div>
El uso de pseudo elementos también es una buena idea, ya que naturalmente no se pueden seleccionar:
document.querySelector('.editor').addEventListener('click', e => { e.currentTarget.querySelector('.input').focus(); });
.editor .input { outline: none; } .editor .input::before, .editor .input::after { opacity: 0.5; } .editor .input::before { content: '/'; } .editor .input::after { content: '/g'; }
<div class="editor"> <span class="input" contentEditable="true"> </span> </div>