2

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>
1

1 Resposta 1

1

Com .selectionStart (pega a posição do cursor no input) e .setSelectionRange() (posiciona o cursor no input) você consegue fazer isso. Aí basta concatenar os caracteres antes da posição + a palavra clicada + os caracteres após a posição, usando .substr():

$(document).ready(function(){
   $('#teclado div span').click(function(){
      var pos = $('#email').get(0).selectionStart;
      var val = $('#email').val();
      var palavra = $(this).text();
      if (palavra == ''){
         $('#email').val(val.substr(0, val.length - 1)).focus();
      } else {
         $('#email')
         .val(val.substr(0,pos) + palavra + val.substr(pos))
         .focus()
         .get(0).setSelectionRange(pos+1, pos+1);
      }
   });
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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>

3
  • Obrigado Sam, funcionou perfeitamente Commented 4/06/2019 às 15:31
  • @Patrique Alves - Também: variável palavra deveria se chamar letra pois é isso que está representando; e o if(palavra=='') é desnecessário já que palavra (letra) nunca está vazio, então basta a parte do else.
    – mari
    Commented 5/06/2019 às 12:09
  • @mari O if é necessário porque há um outro tratamento no código original do AP, ou seja, em algum caso o value estará vazio (provavelmente na tecla virtual "limpar").
    – Sam
    Commented 5/06/2019 às 12:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .