Estou fazendo um teclado virtual simples:
https://codepen.io/anon/pen/qGvweN
Porém eu não consigo identificar a posição do ponteiro no campo, toda vez que eu digito a letra ela só sai no final, mesmo eu definindo para ela sair no começo, qual a logica para eu conseguir colocar a letra digitada sempre aonde o ponteiro tiver colocado e não sempre no final como nesse meu exemplo?
<style>
.teclas span {
display: inline-block;
position: relative;
background: #000;
font-size: 20px;
cursor: pointer;
width: 54px;
height: 38px;
border-radius: 5px;
margin: 0 7px 11px 0;
color: #fff;
line-height: 40px;
text-align: center;
}
</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
$(document).ready(function(){
$('#teclado div span').click(function(){
var palavra = $(this).text();
if (palavra == ''){
$('#email').val($('#email').val().substr(0, $('#email').val().length - 1)).focus();
} else {
$('#email').val($('#email').val() + palavra).focus();
}
});
});
</script>
<input id="email" type="text" value=".gmail.com" autofocus>
<br /><br />
<div id="teclado">
<div class="teclas">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
<span>J</span>
</div>
</div>