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 daemon
      Boa tarde,
       
      Eu tenho uma rotina que faz uma leitura do arquivo .xml de vários sites.

      Eu consigo pegar o tópico e a descrição, e mostrar a imagem que esta na pagina do link.
      Para isso utilizo esta função:
      function getPreviewImage($url) { // Obter o conteúdo da página $html = file_get_contents($url); // Criar um novo objeto DOMDocument $doc = new DOMDocument(); @$doc->loadHTML($html); // Procurar pela tag meta og:image $tags = $doc->getElementsByTagName('meta'); foreach ($tags as $tag) { if ($tag->getAttribute('property') == 'og:image') { return $tag->getAttribute('content'); } } // Se não encontrar og:image, procurar pela primeira imagem na página $tags = $doc->getElementsByTagName('img'); if ($tags->length > 0) { return $tags->item(0)->getAttribute('src'); } // Se não encontrar nenhuma imagem, retornar null return null; } // Uso: $url = "https://example.com/article"; $imageUrl = getPreviewImage($url); if ($imageUrl) { echo "<img src='$imageUrl' alt='Preview'>"; } else { echo "Nenhuma imagem encontrada"; }  
      Mas estou com um problema, esta funcão funciona quando coloco em uma pagina de teste.php. Preciso mostrar em uma página inicial diversas fotos de todos os links. (No caso acima só funciona 1).
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por ILR master
      Fala pessoal, tudo bem?
       
      Eu tenho o seguinte código:
       
      <script>
         $(function(){
      var jElement = $('.fixar_banner');
      $(window).scroll(function(){
          if ( $(this).scrollTop() > 120 ){
              jElement.css({
                  'position':'fixed',
                  'top':'10px'
              });
          }else{
              jElement.css({
                  'position':'relative',
                  'top':'auto'
              });
          }
      });
      });
      </script>
       
      Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
      https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
       
      Espero ter sido claro.
       
      Obrigado :)
       
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
×

Informação importante

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