Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou criando um sistema para cadastro de notas escolares.
Por exemplo, ele puxa os dados dos professores que estão cadastrando e pede as informações para cadastro das notas.
Estou querendo criar uma máscara ou o que der para fazer para limitar a nota a 10 e poder utilizar decimais e numeros sem o "0" na frente, como: 9,14 ou 10 ou até 6.
Valeu, Abraços.
>
6 minutos atrás, William Bruno disse:
use o atributo max e min do input html5
e para a máscara, é possível você usar o atributo pattern
veja exemplos:
http://wbruno.com.br/html/validando-formularios-apenas-com-html5/
ps: não precisa de uma única linha de js.
Entendi a parte da pattern um pouco, mas assim, a parte de inserir o max não funcionou para mim.
A máscara também não funcionou, somente validou.
Segue o código:
<div class="control-group">
<label class="control-label" for="firstname">Nota</label>
<div class="controls">
<input type="text" max="10" maxlength="5" required="required" name="numbers" pattern="[0-9/,]+$"/>
</div> <!-- /controls -->
</div> <!-- /control-group -->sim, com html5 você apenas valida.
para uma máscara de digitação ai sim você precisa de javascript.
exemplos:
http://wbruno.com.br/expressao-regular/diversas-mascaras-com-er/
>
1 minuto atrás, William Bruno disse:
sim, com html5 você apenas valida.
para uma máscara de digitação ai sim você precisa de javascript.
exemplos:
http://wbruno.com.br/expressao-regular/diversas-mascaras-com-er/
Mas ainda tenho uma questão em aberto. O máximo que a tag max não funcionou. Teria alguma sugestão?
max deve funcionar apenas no type="number" ?
Se liga um exemplo...
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="tel" maxlength="2" id="numero"/>
<script type="text/javascript">
document.getElementById("numero").addEventListener("keyup", function() {
//Retira qualquer coisa alem de numeros [0 ~ 9]
this.value = this.value.replace(/[^0-9]/g,'');
var numero = this.value;
if(numero == '')return false;
if(numero > 10){
this.value = 10;
}
if(numero < 0){
this.value = 0;
}
});
</script>
</body>
</html>
Demo:
[https://fiddle.jshell.net/r1cz5cc5/](https://fiddle.jshell.net/r1cz5cc5/)
Edit:
Foi mais que uma linha no JS :(O max só funciona se o type do input for date, range ou number.
massa hehe, mas ele não limita o keypress do usuário neh?
@William Bruno
Consegue enxergar algum problema numa mascara assim?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="tel" maxlength="2" class="validarNota"/>
<input type="tel" maxlength="2" class="validarNota"/>
<script type="text/javascript">
var validarNotaZeroADez = function(){
//Retira qualquer coisa alem de numeros [0 ~ 9]
this.value = this.value.replace(/[^0-9]/g,'');
var numero = this.value;
if(numero == '')return false;
if(numero > 10){
this.value = 10;
}
if(numero < 0){
this.value = 0;
}
};
var notas = document.getElementsByClassName("validarNota");
for(var i = 0; i < notas.length; i++){
notas[i].addEventListener("keyup", validarNotaZeroADez);
}
</script>
</body>
</html><div class="control-group">
<label class="control-label" for="firstname">Nota</label>
<div class="controls">
<input type="number" step="any" max="10" min="0" required="required" name="nota" pattern="[0-9]+$" id="nota"/>
</div> <!-- /controls -->
</div> <!-- /control-group -->
O Código que citei funcionou, mas tenho mais uma duvida: Como eu proíbo o **"."** ou a **","?**está bem legal!
como você tá usando o evento keyup, não limita do usuário copiar e colar com o mouse, ai ele é capaz de colar textos.
para corrigir, basta usar o evento onInput
notas[i].addEventListener("input", validarNotaZeroADez);
ai sobra o problema de permitir digitar números quebrados: 9,5 e o teu script ter que converter para 9.5 para poder fazer as comparações necessárias.>
2 minutos atrás, William Bruno disse:
está bem legal!
como você tá usando o evento keyup, não limita do usuário copiar e colar com o mouse, ai ele é capaz de colar textos.
para corrigir, basta usar o evento onInput
notas[i].addEventListener("input", validarNotaZeroADez);
ai sobra o problema de permitir digitar números quebrados: 9,5 e o teu script ter que converter para 9.5 para poder fazer as comparações necessárias.
O que to usando não é mais os eventos de js e sim somente o HTML5, e queria corrigir os números para uma maneira que ficasse "Bonito" para o usuário final, que seriam alunos e pais.
Não sou muito bom com pattern e js, por isso to aqui implorando rsrsrs...>
4 minutos atrás, mateusjosepretti disse:
por isso to aqui implorando rsrsrs...
Pra q isso?
Tem bastante exemplos na internet sobre mascara...
>
5 minutos atrás, mateusjosepretti disse:
Não sou muito bom com pattern e js
Da uma olhada talvez ajuda:
https://github.com/gabrieldarezzo/helpjs-ravi#exercicios-em-javascript
>
9 minutos atrás, mateusjosepretti disse:
queria corrigir os números para uma maneira que ficasse "Bonito"
Definição de bonito pode variar hehe .
Pensando em usuário final seria oq?
1.5 = 1,5?
Visual? (ai precisa estudar CSS/Layout)
Aceitar números quebrados você pode..
Trata ( virgula deve virar ponto)
Depois converte String para número (ponto flutuante)
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
Seu sistema aceita notas quebradas ?
----
@William Bruno
Boa sacada do cltr + v hehe,vlw pela dica.
use o atributo max e min do input html5
e para a máscara, é possível você usar o atributo pattern
veja exemplos:
http://wbruno.com.br/html/validando-formularios-apenas-com-html5/
ps: não precisa de uma única linha de js.