Prevent text selection / selection in the contents of an editable div

Question

Is there a way to create editable content div where users cannot select / highlight content, but can still input things? I want to create an interface in which users will be forced to delete and enter things by keywords, not being able to make massive changes by highlighting.

I looked at various forms of the "user-select" property in CSS, which works for static content, but doesn't seem to work for elements / inputs editable for content.

Any ideas?

thanks

Answer 1

textarea contenteditable div, - :

window.onload = function () {
    var div = document.getElementById('div');
    if (div.attachEvent) {
        div.attachEvent('onselectstart', function (e) {
            e.returnValue = false;
            return false;
        });
        div.attachEvent('onpaste', function (e) {
            e.returnValue = false;
            return false;
        });
    } else {
        div.addEventListener('paste', function (e) {
            e.preventDefault();
        });
        div.addEventListener('select', function (e) {
            var start = this.selectionStart,
                end = this.selectionEnd;
            if (this.selectionDirection === 'forward') {
                this.setSelectionRange(end, end);
            } else {
                this.setSelectionRange(start, start);
            }
        });
    }
};

HTML:

<form>
    <textarea id="div"></textarea>
</form>

jsFiddle.

:

• onselect input textarea form. HTML-.
• IE9 - 10 selectionDirection, IE.
• IE, , , . , . ;).
• IE contenteditable div .

---

, .

Answer 2

, , ( user-select: none ), css:

::selection { background: transparent }

user-select: none, . , , .

, , .