javascript - Prevent text selection/highlighting in a content editable div -
is there way create content-editable div users can't select/highlight content can still input things? want create interface users forced delete , enter things key-by-key, without being able make mass edits via highlighting.
i've looked various forms of "user-select" property in css, works static content, doesn't seem work content-editable elements/inputs.
any ideas?
thanks
if can accept textarea
instead of contenteditable div
, can this:
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>
some observations on code:
- in many browsers
onselect
firedinput
ortextarea
elements withinform
. reason different html yours. - ie9 - 10 don't support
selectiondirection
, that's why ie's legacy event handling model used these browsers. - if not ie, still can replace bunch of text selecting mouse , hitting key without releasing mouse button. suppose prevented detecting if mouse button down, , in case preventing keyboard actions. homework ; ).
- the code ie works contenteditable
div
s too.
edit
looks i've done your "homework" too.
Comments
Post a Comment