orbeon/2012-05-29-ie-focus.html

## 2012-05-29-ie-focus.html
<!DOCTYPE html>
<html>
    <head>
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            #hidden-input { visibility: hidden }
        </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
        <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script type="text/javascript">
            $(function() {

                $('#focus-hidden').click(function (event) {
                    event.preventDefault();
                    $('#hidden-input').focus();
                });

                $('#focus-moved').click(function (event) {
                    event.preventDefault();
                    var input = $('#moved-input');
                    var parent = input.parent();
                    $('.container').append(input);
                    parent.append(input);
                    if ($('.focus-version:checked').val() == 'default') {
                        input.focus();
                    } else {
                        var focusable = $('#focus-moved');
                        setFocus(focusable).then(function() { setFocus(input); });
                    }
                });

                function setFocus(element) {
                    var deferred, setFocusWorker;
                    deferred = $.Deferred();
                    (setFocusWorker = function () {
                        element.focus();
                        var focusSet = document.activeElement === element[0];
                        focusSet ? deferred.resolve(): _.defer(setFocusWorker);
                    })();
                    return deferred;
                }
            });
        </script>
    </head>
    <body>
        <form>
            <div class="container">
                <div class="page-header"><h1>Focus on IE</h1></div>
                <div class="row">
                    <div class="span4"><button class="btn" id="focus-hidden">Focus on hidden input</button></div>
                    <div class="span4"><input id="hidden-input"/></div>
                </div>
                <div class="row">
                    <div class="span4"><button class="btn" id="focus-moved">Focus on moved input</button></div>
                    <div class="span4"><input id="moved-input"/></div>
                    <div class="span4">
                        <label class="radio inline">
                            <input type="radio" class="focus-version" name="focus-version" value="default" checked>Default
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="focus-version" name="focus-version" value="custom">Custom
                        </label>
                    </div>
                </div>
            </div>
        </form>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
	<style type="text/css">
	#hidden-input { visibility: hidden }
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
	<script type="text/javascript">
	$(function() {

	$('#focus-hidden').click(function (event) {
	event.preventDefault();
	$('#hidden-input').focus();
	});

	$('#focus-moved').click(function (event) {
	event.preventDefault();
	var input = $('#moved-input');
	var parent = input.parent();
	$('.container').append(input);
	parent.append(input);
	if ($('.focus-version:checked').val() == 'default') {
	input.focus();
	} else {
	var focusable = $('#focus-moved');
	setFocus(focusable).then(function() { setFocus(input); });
	}
	});

	function setFocus(element) {
	var deferred, setFocusWorker;
	deferred = $.Deferred();
	(setFocusWorker = function () {
	element.focus();
	var focusSet = document.activeElement === element[0];
	focusSet ? deferred.resolve(): _.defer(setFocusWorker);
	})();
	return deferred;
	}
	});
	</script>
	</head>
	<body>
	<form>
	<div class="container">
	<div class="page-header"><h1>Focus on IE</h1></div>
	<div class="row">
	<div class="span4"><button class="btn" id="focus-hidden">Focus on hidden input</button></div>
	<div class="span4"><input id="hidden-input"/></div>
	</div>
	<div class="row">
	<div class="span4"><button class="btn" id="focus-moved">Focus on moved input</button></div>
	<div class="span4"><input id="moved-input"/></div>
	<div class="span4">
	<label class="radio inline">
	<input type="radio" class="focus-version" name="focus-version" value="default" checked>Default
	</label>
	<label class="radio inline">
	<input type="radio" class="focus-version" name="focus-version" value="custom">Custom
	</label>
	</div>
	</div>
	</div>
	</form>
	</body>
	</html>