Having an issue with a contenteditable div where the placeholder text starts behind the cursor instead of at the cursor position. Any suggestions on how to correct this?
<div id="input_box" contenteditable="true" autofocus="autofocus" autocomplete="off" spellcheck="false" placeholder="This is where the text should start at the cursor"></div>
<style>
/*[contenteditable=true]:empty:before{
content: attr(placeholder);
display: block; For Firefox
}*/
#input_box {
background-color: white;
/*position:relative;*/
border: 1px solid blue;
/*height:60px;*/
width: 500px;
padding: 10px;
color:black;
border-radius:3px;
text-indent: 10px;
font-size:18px;
/*border-color:yellow;*/
}
#input_box:focus {
outline-style:solid;
outline-color:blue;
outline-width:0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById("input_box").focus();
};
</script>