CODEWITHSUNDEEP
javascripthtmlcontenteditable
Novelist
Novelist

Reputation: 479

contenteditable divs has a weird behaviour on focus in Opera

I decided to use div with contenteditable instead of input. Here is a code, it's simple <div contenteditable="true"></div> So, and look at jsfiddle: http://jsfiddle.net/QkfKk/

Just for jsfiddle I've marked an area of first line. In Opera, I must click directly to marked area to focus the div. Also, I can focus by double click in any space over there. But, that click shouldn't be double. I hope I explain it right. In Chrome and any other browser, I can make just one click to any place in div to focus it. On marked area or on non-marked area, whatever. That's correct behaviour, I believe.

Upvotes: 2

Views: 506

Answers (1)

Novelist
Novelist

Reputation: 479

I've solved it. That solution has some defects but that's enough for me. When I click on non-marked area focus-event triggers anyway. So, I decided just set cursor position to the last possible position on trigger focus-event. Here's code:

var range = document.createRange();
var selection = getSelection();
var children = this.childNodes;
var last = children[children.length-1];
if (last.textContent.length) {
    range.setStart(last,last.textContent.length);
} else {
    range.setStart(this,0);
}
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);

And this binds on focus, that's all. The solution is easy indeed but that works well.

fiddle: http://jsfiddle.net/QkfKk/7/

Upvotes: 1

Related Questions