0
162
Views¿Cómo hacer que el decorador en un cuadro de texto de patrón de expresiones regulares no se pueda seleccionar?
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.
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question