contenteditable detect element

Trying to detect element which is being edited... (contenteditable)

by Laurens Maneschijn

HTML

<h1>Trying to detect element which is being edited... (no luck yet)</h1>

<hr>
<div>
	Several demo elements:
	<textarea></textarea>
	<input type="text">
	<button>button</button>
	<select><option>1</option><option>2</option></select>
	<br>
	Specific contenteditable target element:<br>
	<p id="editable" contenteditable="true" spellcheck="false">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

<hr>
<div>
	document.activeElement = <span id="log_activeElement"></span>
</div>

<div>
	<button id="toggle_document_editable">Toggle full document editable</button>
	Full document editable: <span id="log_document_editable">false</span>
</div>

<div>
	<button id="toggle_all_elements_editable">Toggle all elements editable</button>
	All elements editable: <span id="log_all_elements_editable">false</span>
</div>

<hr>
<div>
	<h2>Notes:</h2>
	<ul>
	<li>
		If the entire window loses focus
		<code>document.activeElement</code> takes the value 
		<code>HTMLBodyElement</code>.
	</li>
	<li>
		If <code>document.body.contentEditable == true</code>
		or if <code>document.designMode = 'on'</code>
		the value of <code>document.activeElement</code>
		is always HTMLBodyElement,...

CSS

html {
	background: #fff;
}
body{
	padding: 2px;
}
code {
	background-color: rgba(128, 128, 128, 0.2);
}
ol, ul {
	list-style-type: initial;
	padding-left: 20px;
}

/* blue dotted line around
   the document.activeElement */
.is_activeElement {
	outline: 1px dashed #00f;
}

/* red border around the target element,
   if document.activeElement == target */
.is_targeted_activeElement {
	border: 1px solid #f00;
}

/* blue background on anything :focus */
*:focus {
	background-color: rgba(0, 0, 255, 0.1);
}

JavaScript

$(document).ready(function(){
    $("#toggle_document_editable").click(toggle_document_editable);
    $("#toggle_all_elements_editable").click(toggle_all_elements_editable);
});

// keep checking if activeElement is the targeted element:
setInterval(function(){
	var element = $("#editable")[0]; // *1
	if (document.activeElement == element) {
		$(element).addClass('is_targeted_activeElement');
	} else {
		$(element).removeClass('is_targeted_activeElement');
	}
}, 10);

// --- keep logging what the current activeElement is (only when it changes value)
// *3
var last_activeElement = null;
setInterval(function(){
	if (document.activeElement !== last_activeElement) {
		// update log text:
		var descr = ('' + document.activeElement); // *2
		$('#log_activeElement').text(descr);
		// update css class:
		$('.is_activeElement').removeClass('is_activeElement');
		$(document.activeElement).addClass('is_activeElement');
	}
	last_activeElement = document.activeElement;
}, 10);


function toggle_document_editable(){
	if (document.body.contentEditable !== 'true' || document.designMode !== "on") {
		document.body.contentEditable = true;
		document.designMode = 'on';
		$('#log_document_editable').text('true');
		return true;
	} else {
		document.body.contentEditable = false;
		document.designMode = 'off';
		$('#log_document_editable').text('false');
		return false;
	}
}

function toggle_all_elements_editable(){
	if( $('*[contenteditable]').length > 1 ) {
		$('*:not(#editable)').removeAttr('contenteditable');
		$('#log_all_elements_editable').text('false');
	} else {
//		$('*:not(#editable)').attr('contenteditable','true');
		$('*:not(#editable)').not('html, body').attr('contenteditable','true');
		$('#log_all_elements_editable').text('true');
	}
}


/*
--- Notes:

// *1
$(...)[0] === $(...).get(0) :
	get first HTMLElement from jquery selection if any, or null.

// *2
(''+somevar) : 
	shorthand to get the toString() value from anything.

// *3
TODO: use event listener for changing...