Count characters while typing [closed]

Navigation
4

I'm developing a sales site and it has a product that sells by letter.

Ex. Each 10 real letter.

If the person wants to name it, add the value: Ex. Betinho (7 letters) R $ 70,00.

I need to do this via input text.

    
asked by anonymous 03.08.2017 / 15:08

5 answers

9

When counting the length of the word the final value also counts the spaces.

Not anymore: 

var espaco = 0;
$('#nome').focus();

$('#nome').keyup(function(e) {

  if (e.keyCode == 8 || e.keyCode == 46) {
    espaco = 0;
    $('#nome').val("");
  }

  var text = $('#nome').val();

  if (text[text.length - 1] != ' ') {
    $('.preco').text((text.length - espaco) * 10 + ',00');
  } else {
    espaco++;
  }

});
body {
  font-size: 1.5em;
}

input {
  border: 0;
  background-color: transparent;
  border-bottom: 1px solid;
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Digiteapalavraoufrase:<br><inputid="nome" type="text" />

<div class='total' style='margin-top: 2%;'>
  Preço do produto R$: <span class='preco'></span>
</div>

Just take the last position of the string and check if it equals a space. In the case ' '

Whenever there is a space, it adds +1 the variable espaço which will be subtracted from the final value and multiplied by the value of each letter.

I've also added a snippet that detects whether backspace or delete has been tightened. This way you can reset the espaco variable and clear the field value so there are no errors in the multiplication.

    
03.08.2017 / 15:52
5

Just get the length of your string. 

var str = "Betinho";
var n = str.length;
console.log(n);
    
03.08.2017 / 15:10
5

You need to count the number of characters that have the name with the function length , but this function counts the number of characters with spaces.

In order for the spaces not to be multiplied to the value, we can count them split(" ").length - 1 and then subtract them from the calculation.

You can do this as follows: 

function calcular(el) {
  const valor = document.getElementById('valor');
  const precoPorLetra = 10;
  const espacos = (el.value.split(" ").length - 1); //conta espacos
  const caracteres = el.value.length;
  valor.value = parseFloat( (caracteres - espacos) * precoPorLetra).toFixed(2); //formatado para duas casas decimais
}
Nome: <input onkeyup="calcular(this)" type="text" />
Valor: <input id="valor" type="text" readonly />
    
03.08.2017 / 15:17
3

You can get the length of a string through its length field.

So if you already have the word and the price, i.e .: 

let palavra = "Betinho";
let precoUnitario = 10;

Then: 

let valorPalavra = precoUnitario * palavra.length;

Now to get the input value, the easiest way is with jQuery: 

let palavra = $(idDoInput).val();

Or without jQuery, if you have a fetish for unnecessarily long code: 

let palavra = document.getElementById(idDoInput).value;
    
03.08.2017 / 15:13
3
  • Accepts only letters, including accents (not to inflate prices with commas, dots, special characters and so on: D)
  • Thousands separator . (dot) and decimal , (comma)
  • Spaces are accepted but are not counted 

$(document).ready(function() {
    $('.soLetras').keyup(function (el) {

      $(this).val($(this).val().replace(/[^a-zA-Zà-úÀ-Ú ]/g,''));
      var nome = document.getElementById('nome');
  
      var espacos = (nome.value.split(" ").length - 1);

      var letras = nome.value.length;		    
      var total = parseFloat((letras-espacos) * 10).toFixed(2);
	    
      total=total.replace(".", ",");
	    
      $('.total').html("R$ " + (total).replace(/\B(?=(\d{3})+(?!\d))/g, ".")); 
	    
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><inputtype="text" class="soLetras" name="nome" id="nome" size="10" placeholder="Somente Letras">
<span class="total"></span>
    
04.08.2017 / 02:47
Turn m: s in seconds Why are you concatenating instead of adding?