Autor Tópico: input que aceita apenas números  (Lida 1033 vezes)

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 326
    • Ver perfil
input que aceita apenas números
« Online: 25 de Abril de 2017, 15:16 »
Tenho um campo chamado valor em um formulário, e achei na web uma opção "oninput" que faz com que apenas números sejam aceitos na digitação no campo. Funciona.
Mas estou com dificuldade de fazer com que neste input seja apresentado (e salvo) a variável $valor. Já coloquei name="$valor" e id="$valor" e ainda não deu.
Código: [Selecionar]
<label for="valor">valor</label>
<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" />

Offline Felix

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 3.018
    • Ver perfil
    • Alexsandro Felix
Re:input que aceita apenas números
« Resposta #1 Online: 25 de Abril de 2017, 15:26 »
Em HTML5 use o input type number

Código: [Selecionar]
<input type="number" name="someid" />

https://www.w3.org/wiki/HTML/Elements/input/number

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 326
    • Ver perfil
Re:input que aceita apenas números
« Resposta #2 Online: 25 de Abril de 2017, 16:49 »
A opção number só é funcional no submit. Ela permite escrever caracteres texto, sendo que o principal erro é quando o usuário brasileiro ou alemão coloca vírgula decimal. Por isso preciso apenas limitar os caracteres como faz a função acima. Meu problema é não entender como ela funciona para o input  ficar como se fosse
Código: [Selecionar]
<input type="text" name="valor" id ="valor" value ="<?php echo $valor?>" />mas com a funcionalidade de só aceitar caracteres numéricos.

Offline Felix

  • Equipe Ubuntu
  • Usuário Ubuntu
  • *****
  • Mensagens: 3.018
    • Ver perfil
    • Alexsandro Felix
Re:input que aceita apenas números
« Resposta #3 Online: 25 de Abril de 2017, 17:42 »
Tente com Javascript:

Código: [Selecionar]
<script language='JavaScript'>
function SomenteNumero(e){
    var tecla=(window.event)?event.keyCode:e.which;   
    if((tecla>47 && tecla<58)) return true;
    else{
    if (tecla==8 || tecla==0) return true;
else  return false;
    }
}
</script>
 
<html>
<head>
<title> Somente Números </title>
</head>
<body>
<input type='text' size='10' value='' onkeypress='return SomenteNumero(event)'>
</body>
</html>

fonte: http://codigofonte.uol.com.br/codigos/input-text-somente-com-numeros

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 326
    • Ver perfil
Re:input que aceita apenas números
« Resposta #4 Online: 25 de Abril de 2017, 18:06 »
Também funciona. A questão está na sintaxe. Em que lugar do script devo identificar a variável $valor?
Será que dentro do parênteses onde diz event, eu tenho que colocar $valor?
Código: [Selecionar]
<input type='text' size='10' value='' onkeypress='return SomenteNumero(event)'>
Tentei identificar o campo com name, id e value. Restringe a entrada à números, mas não opera.
Código: [Selecionar]
<input type="text" size="10" name="valor" id="valor" value="<?php echo $valor?>" onkeypress="return SomenteNumero(event)">
« Última modificação: 25 de Abril de 2017, 18:08 por maurov »

Offline maurov

  • Usuário Ubuntu
  • *
  • Mensagens: 326
    • Ver perfil
Re:input que aceita apenas números
« Resposta #5 Online: 26 de Abril de 2017, 18:33 »
Tentei, mas não consegui.
Como preciso do sistema, deixei 2 inputs lado a lado.
O primeiro input é o editável, onde o usuário digita o valor desejado. Este input principal exibe, durante a abertura de algum registro, o conteúdo da variável "valor". Ele corrige o erro de o usuário digitar ponto ou vírgula decimal automaticamente. O ponto fraco é que não força a exibição de 2 casas decimais.
Para isso coloquei ao lado um outro input, que ficou num tom claro e não é editável, mas apresenta sempre o valor em 2 casa decimais.
Feio, mas funcional.

Código: [Selecionar]
<input id="valor" size="4" type="number" name="valor" min="0" value="<?php echo $valor?>"
             step="0.01" pattern="^\d+(?:\.\d{1,2})?$"
            onblur="this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d{1,2})?$/.test(this.value)?'inherit':'red'" />
<input placeholder="<?php echo $valor?>" size="3" />