IvanSanchez/gist:19236943e971c09263d3

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>

<div id='container' tabindex='0'>

<textarea id='buzzwords' readonly cols='20' rows='5' tabindex='0'>
Efficiencies will come from reliably incentivizing our organic growths. Best-of-breed drivers strategically enable actionable emerging markets for our core assets. Our Seamless Bandwidth solution offers user experiences a suite of end-to-end offerings. In the future, will you be able to conservatively relay propositions in your business?

Key players will take ownership of their alignments by effectively growing senior verticals. Change the way you do business - adopt corporate siloes. In the deliverable space, industry is globally reusing its next-generation visibilities. In the paradigm shift space, industry is proactively integrating its competitive step-changes.
</textarea>

</div>


<script>

var buzzwords = document.getElementById('buzzwords');
var container = document.getElementById('container');

container.focus();

window.setTimeout( function() {
	buzzwords.focus();
	buzzwords.select(0,99999);
},500);

$(buzzwords).on('focusout',function(){

	console.log('focusout', document.activeElement);

	window.setTimeout( function() {
		container.style.display='none';
	},500);
} );

$(buzzwords).on( 'blur',function(){
	console.log('blur');
} );
$(buzzwords).on( 'focusin',function(){
	console.log('focusin');
} );
$(buzzwords).on( 'focus',function(){
	console.log('focus');
} );

</script>

<ol>
<li>Manually deselect the text
<li>Manually select part of the text
<ul>
	<li>That will trigger the jQuery event <code>focusout</code>
</ul>
<li>Congratulations, now you can't get rid of the selection handlers.
</ol>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" id="vp" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
	</head>
	<body>

	<div id='container' tabindex='0'>

	<textarea id='buzzwords' readonly cols='20' rows='5' tabindex='0'>
	Efficiencies will come from reliably incentivizing our organic growths. Best-of-breed drivers strategically enable actionable emerging markets for our core assets. Our Seamless Bandwidth solution offers user experiences a suite of end-to-end offerings. In the future, will you be able to conservatively relay propositions in your business?

	Key players will take ownership of their alignments by effectively growing senior verticals. Change the way you do business - adopt corporate siloes. In the deliverable space, industry is globally reusing its next-generation visibilities. In the paradigm shift space, industry is proactively integrating its competitive step-changes.
	</textarea>

	</div>


	<script>

	var buzzwords = document.getElementById('buzzwords');
	var container = document.getElementById('container');

	container.focus();

	window.setTimeout( function() {
	buzzwords.focus();
	buzzwords.select(0,99999);
	},500);

	$(buzzwords).on('focusout',function(){

	console.log('focusout', document.activeElement);

	window.setTimeout( function() {
	container.style.display='none';
	},500);
	} );

	$(buzzwords).on( 'blur',function(){
	console.log('blur');
	} );
	$(buzzwords).on( 'focusin',function(){
	console.log('focusin');
	} );
	$(buzzwords).on( 'focus',function(){
	console.log('focus');
	} );

	</script>

	<ol>
	<li>Manually deselect the text
	<li>Manually select part of the text
	<ul>
	<li>That will trigger the jQuery event <code>focusout</code>
	</ul>
	<li>Congratulations, now you can't get rid of the selection handlers.
	</ol>

	</body>
	</html>