input que aceita apenas números

maurov · 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');" />

Felix · 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

maurov · 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.

Felix · 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

maurov · 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)">

maurov · 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" />

input que aceita apenas números

maurov

Felix

maurov

Felix

maurov

maurov