Ir para conteúdo

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 landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, ativo. Nela tem cadastrado vários itens. No campo ativo eu coloco a letra "S" para informar que este item está ativo no sistema. Por exemplo: 1, casa, S 2, mesa, S 3, cama, S 4, moto S 5, rádio O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "produtos" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, mesa, moto 2, mesa, casa, cama 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela produtos da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "mesa". Preciso fazer com que o php me liste todos os registros da tabela "produtos" que contenham a palavra "mesa". Até aqui tudo bem eu consigo listar. Estou fazendo assim: <?php $item = "mesa" $sql = mysqli_query($conn, "SELECT * FROM produtos WHERE item1 LIKE '$item' OR item2 LIKE '$item' OR item3 LIKE '$item' LIMIT 10"); while($aux = mysqli_fetch_assoc($sql)) { $id = $aux["id"]; $item1 = $aux["item1"]; $item2 = $aux["item2"]; $item3 = $aux["item3"]; echo $id . " - " . $item1 . ", " . $item2 . ", " $item3 . "<br>"; } ?> O problema é que está listando todos os registros que contém o item mesa. Eu preciso que o php verifique os demais item e me liste somente os registro em que todos os registros estejam ativos no sistema. No exemplo acima ele não deveria listar o registro 3. pois nesse registro contém o item "radio" e este item não está ativo no sistema. Ou seja, o registro "radio" na tabela itens não possui um "S" na coluna "ativo". Alguém sabe como resolver isso?
    • Por ILR master
      Fala galera.
      Espero que todos estejam bem.
      Seguinte: Tenho um arquivo xml onde alguns campos estão com : (dois pontos), como o exemplo abaixo:
       
      <item>
      <title>
      d sa dsad sad sadasdas
      </title>
      <link>
      dsadas dsa sad asd as dsada
      </link>
      <pubDate>sadasdasdsa as</pubDate>
      <dc:creator>
      d sad sad sa ad as das
      </dc:creator>
      </item>
       
      Meu código:
       
      $link = "noticias.xml"; 
      $xml = simplexml_load_file($link); 
      foreach($xml -> channel as $ite) {     
           $titulo = $ite -> item->title;
           $urltitulo = $ite -> item->link;
           print $urltitulo = $ite -> item->dc:creator;
      } //fim do foreach
      ?>
       
      Esse campo dc:creator eu não consigo ler. Como faço?
       
      Agradeço quem puder me ajudar.
       
      Abs
       
       
    • Por First
      Olá a todos!
       
      Eu estou criando um sistema do zero mas estou encontnrando algumas dificuldades e não estou sabendo resolver, então vim recorrer ajuda de vocês.
      Aqui está todo o meu código: https://github.com/PauloJagata/aprendizado/
       
      Eu fiz um sistema de rotas mas só mostra o conteúdo da '/' não sei porque, quando eu tento acessar o register nada muda.
      E eu também quero que se não estiver liberado na rota mostra o erro de 404, mas quando eu tento acessar um link inválido, nada acontece.
      Alguém pode me ajudar com isso? E se tiver algumas sugestão para melhoria do código também estou aceitando.
       
       
      Desde já, obrigado.
×

Informação importante

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