Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mateusjosepretti

Mask com jQuery para Nota(Escolar de 0 a 10)

Recommended Posts

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 -->

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/

Compartilhar este post


Link para o post
Compartilhar em outros sites
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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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/

 

Edit:

Foi mais que uma linha no JS :( 

Compartilhar este post


Link para o post
Compartilhar em outros sites

O max só funciona se o type do input for date, range ou number.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<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 ","?

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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...

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por ILR master
      Fala galera, tudo certo?
       
      Seguinte: No servidor A estou tentando fazer uma consulta com o servidor B, mas está dando erro.
      Estou usando o mesmo código de conexão do servidor B que funciona perfeitamente, mas no servidor A, dá erro.
      Segue código:
       
      $host = 'servidor B';
      $user = 'user';
      $pass = '********';
      $db   = 'banco';
       
      // conexão e seleção do banco de dados
      $conexao = mysqlI_connect($host, $user, $pass, $db);
      mysqlI_set_charset($conexao,"utf8");
      //print "Conexão rodando e OK!"; 
      //mysqlI_close($conexao);
       
      Alguém pode me ajudar?
    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.