Ir para conteúdo

Arquivado

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

gj_gc

Obrigar que o campo seja preenchido do começo

Por , em Javascript

Recommended Posts

gj_gc    0

gj_gc
Postado

Olá! em um input de celular, por exemplo, consigo colocar um máscara e obrigar o usuário a digitar uma quantidade específica de caracteres e no padrão que desejo, mas gostaria de tbm obrigar o msm a quando clicar no campo só poder digitar se for a partir do começo desde. Exemplo: (81)999... e que ele não possa fazer algo do tipo ()999... msm que minhas máscaras e validações não permitam que ele cadastre assim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Olá, gj_gc.

 

É bacana você colocar o seu nome. :-)

 

Fiz um exemplo, dá uma olhada pra vê se ajuda.

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Phone's Mask</title>

  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="form.css">
</head>
<body>
  <form class="form">
    <label class="form-label" for="phone" >Phone</label>
    <input id="phone" class="form-input" type="text">
  </form>

  <script src="phone.js"></script>
</body>
</html>

CSS (reset.css)

* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

html, body {
  height: 100%;
}

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

input {
  font-size: inherit;
}

CSS (form.css)

.form {
  background-color: #28324E;
  width: 40%;
  padding: 5%;
  margin-top: 4em;
  margin-left: auto;
  margin-right: auto;
  font-size: 2em;
  text-align: center;
}
.form-label {
  display: block;
  margin-bottom: .4em;
  color: #FFF;
}
.form-input {
  display: block;
  box-sizing: border-box;
  width: 80%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: .8em;
  height: 1.5em;
  border: 1px solid #2969B0;

  transition: border .2s linear;
}
.form-input:focus {
  border-width: 4px;
}

.form-button {
  display: inline-block;
  padding-left: 2%;
  padding-right:2%;
  background-color: #41A85F;
  color: inherit;
  font-weight: normal;
  cursor: pointer;
}

JavaScript (phone.js)

(function () {
  'use strict';

  var $phone = document.querySelector('#phone');

  $phone.addEventListener('keypress', function (event) {
    var $this = this;
    var key = event.key;
    var isNumber = /[0-9]|Backspace|ArrowLeft|ArrowRight/;
    var isString = /[a-zA-Z`'^]/g;

    var isDdd = /^\(?([1-9]{2})\)? ?/g;
    var isFirstFourthNumbers = /^\(?([1-9]{2})\)? ?([0-9]{4})$/g;
    var isNineNumbers = /^\(?([1-9]{2})\)? ?([0-9]{4})-?([0-9]{5})$/g;
    var removeKeyMore15 = /^\(?([1-9]{2})\)? ?([0-9]{4})-?([0-9]{5})$/g

    if (/Backspace|ArrowLeft|ArrowRight/.test(key)) {
      return false;
    };

    if (!isNumber.test(key) || $this.value.length >= 15) {
      event.preventDefault();
    };

    $this.value = $this.value.replace(isDdd, '($1) ');
    $this.value = $this.value.replace(isFirstFourthNumbers, '($1) $2-');
    $this.value = $this.value.replace(isNineNumbers, '($1) $2-$3');

    $this.value = $this.value.replace(isString, '');
  });
})();

Se ficar com alguma dúvida é só falar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gj_gc    0

gj_gc
Postado

Massa man, vlw, a parte das máscaras eu já tinha feito era só obrigar o usuário a começar a digitar pelo começo. Só que tem esse exemplo só funciona no Mozilla, não funciona no Chrome O.o

 

E vou mudar o nome lá ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

gj_gc    0

gj_gc
Postado

Consegui agora só com isso man:

function Comeco(e){
onkeypress = function() {
var $this = this;
var key = event.key;
var isNumber = /[0-9]|Backspace|ArrowLeft|ArrowRight/;

if (!isNumber.test(key) || $this.value.length >= 15) {
event.preventDefault();
};
};
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • juniormatrix
      Script para validação
      Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Alessandro Bodão
      Projeto de Branding
      Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • rogerblower
      Qual calendário free usar?
      Por rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • Sapinn
      Erro em arquivos do tipo woff, tff
      Por Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • mateus.andriollo
      Executar função via marcação de um elemento [RESOLVIDO]
      Por mateus.andriollo
      Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.
       
      Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")
       
×

Informação importante

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

  Aceito