Sample
I’ve changed how it works, and it seems to solve a few issues 🙂
- Accepts any text a normal input can
- Backspace works
- Theoretically can support pasting text
Usual caveats apply still, most notably the inability to visually see where the caret is.
I’d think long and hard whether this solution is worth implementing, based on its drawbacks and usability issues.
$(function() {
var cursor;
$('#cmd').click(function() {
$('input').focus();
cursor = window.setInterval(function() {
if ($('#cursor').css('visibility') === 'visible') {
$('#cursor').css({
visibility: 'hidden'
});
} else {
$('#cursor').css({
visibility: 'visible'
});
}
}, 500);
});
$('input').keyup(function() {
$('#cmd span').text($(this).val());
});
$('input').blur(function() {
clearInterval(cursor);
$('#cursor').css({
visibility: 'visible'
});
});
});
#cmd {
font-family: courier;
font-size: 14px;
background: black;
color: #21f838;
padding: 5px;
overflow: hidden;
}
#cmd span {
float: left;
padding-left: 3px;
white-space: pre;
}
#cursor {
float: left;
width: 5px;
height: 14px;
background: #21f838;
}
input {
width: 0;
height: 0;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmd">
<span></span>
<div id="cursor"></div>
</div>
<input type="text" name="command" value="" />