0
151
Viewshow to make the decorator in a regex pattern textbox unselectable?
Here is a screenshot of regextester.com:
Users can only select the spaces between the preset pattern decorators, how to achieve this? I inspected the stylesheets, still have no clue.
·
Juan Pablo Isaza
1 answers
Answer question0
You need to utilize contentEditable, here's a simplified recreate of regextester input:
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>Using pseudo elements is also a good idea since there are natually unselectable:
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