msavin/gist:a66873584b8761ce35e1

## gistfile1.html
<!--
	Live Demo: http://jsfiddle.net/drhz4vrr/
-->

<html>

<!-- Start CSS -->
<style>
	#fauxInput {
		display: inline-block;
		line-height: 20px;
		text-indent: 10px;
		min-width: 10px;
		outline: none;
		color: #232323;
	}
	.inputWrapper {
		background: #ccc;
		max-width: 250px;
		line-height: 50px;
		height: 50px;
		margin: 10px 0;
		cursor: text;
		border-radius: 5px;
		color: #999;
		overflow: hidden;
	}
	.domain {
		display: inline-block;
	}
</style>

<!-- Start HTML -->
<body>
	Enter Your Company Domain
	<div class="inputWrapper">
	<div id="fauxInput"></div><div class="domain">.slack.com</div>
	</div>

	<br>
	<button onclick="getValue()">Get Value</button>

	<br><br>
	Works flawlessly in IE9+, FF4+, Safari 5+
</body>

<!-- Start JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	// Select Input Function
	selectInput = function () {
		$('#fauxInput').attr('contentEditable', true);
		$('#fauxInput').html('');
		$('#fauxInput').focus();
	};

	// Event
	$('.inputWrapper').bind('click', function () {
		selectInput();
	});

	// Get Value
	getValue = function () {
		var value = document.getElementById('fauxInput').innerHTML;
		alert(value);
	};
</script>

</html>
	<!--
	Live Demo: http://jsfiddle.net/drhz4vrr/
	-->

	<html>

	<!-- Start CSS -->
	<style>
	#fauxInput {
	display: inline-block;
	line-height: 20px;
	text-indent: 10px;
	min-width: 10px;
	outline: none;
	color: #232323;
	}
	.inputWrapper {
	background: #ccc;
	max-width: 250px;
	line-height: 50px;
	height: 50px;
	margin: 10px 0;
	cursor: text;
	border-radius: 5px;
	color: #999;
	overflow: hidden;
	}
	.domain {
	display: inline-block;
	}
	</style>

	<!-- Start HTML -->
	<body>
	Enter Your Company Domain
	<div class="inputWrapper">
	<div id="fauxInput"></div><div class="domain">.slack.com</div>
	</div>

	<br>
	<button onclick="getValue()">Get Value</button>

	<br><br>
	Works flawlessly in IE9+, FF4+, Safari 5+
	</body>

	<!-- Start JavaScript -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	// Select Input Function
	selectInput = function () {
	$('#fauxInput').attr('contentEditable', true);
	$('#fauxInput').html('');
	$('#fauxInput').focus();
	};

	// Event
	$('.inputWrapper').bind('click', function () {
	selectInput();
	});

	// Get Value
	getValue = function () {
	var value = document.getElementById('fauxInput').innerHTML;
	alert(value);
	};
	</script>

	</html>