0

Boa tarde pessoal,

Estou tentando inserir um domínio fixo na hora de digitação do email com jquery mask... é importante que seja por jquery mask e que tenha o "@teste.com.br". Segue abaixo o código com snippet:

<div class="wrap-input100 validate-input" data-validate = "Digite seu usuário">
    <input class="email input100 <?php echo (!empty($user_erro)) ? 'is-invalid' : ''; ?>" type="text" name="usuario">
    <span class="focus-input100" data-placeholder="Email"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
  <script>
    $(document).ready(function(){
            $('.email').mask('*{A}@teste.com.br', {'translation': { "A": { pattern: /[\w@\-.+]/, recursive: true }},reverse: true});
    });
  </script>

Como podem ver, ele mostra apenas um caracter antes de "@teste.com.br" e se eu tento colocar a máscara como "[email protected]", mas ele repete o "@teste.com.br" toda vez que insiro um caracter novo, ao invés de manter somente 1 "@teste.com.br".

Alguém sabe o que pode ser?

10
  • Porque não separa em dois campos e coloca um do lado do outro? Assim dispensaria o JavaScript para algo tão trivial. Já que o domínio sempre será o mesmo você pode concatenar o prefixo ao @dominio no backend quando receber o payload
    – Reptile
    31/08/2022 às 16:57
  • Já sugeri fazer isto, já sugeri colocar só o prefixo e no backend ele já vai completando... mas acontece que querem este input exatamente como eu falei lá em cima
    – Antharaz
    31/08/2022 às 17:01
  • Coloca algo como isso: getbootstrap.com/docs/5.2/forms/input-group/#basic-example 31/08/2022 às 17:02
  • Entendo sua sugestão, mas o que queria mesmo era saber como deixar um texto fixo à direita podendo deixar caracteres ilimitados a esquerda com masks
    – Antharaz
    31/08/2022 às 17:10
  • Mas visualmente ficaria semelhante, exemplo: i.stack.imgur.com/m16hU.png, são dois inputs, um readonly, que não tem name="" e fica a direita, só serve para ser visual, e o da esquerda, que é o endereço do e-mail, você pode concatenar até no front-end mesmo, na hora de enviar a requisição HTTP, supondo que você use Ajax ou fetch (ou Axios). Os caracteres no campo esquerdo podem ser "ilimitados" ou limitados assim, e não precisará de máscara. Fora que via CSS você pode eliminar a borda e bg dos inputs e fazer eles parecerem um único input, o usuário nem notaria se tratar de 2.
    – Reptile
    31/08/2022 às 17:15

1 Resposta 1

0

Consegui resolver.

  • Peguei a posição do "@" no input, fiz o slice da string para remover tudo a partir do "@" (sempre conferindo se a pos não é -1) e adicionei o endereço fixo;

  • No final usei uma função que encontrei na internet "setCaretPosition" que deixa o cursor na posição que desejar (antes do "@" no caso).

O código com o Snippet está logo abaixo:

  <div class="wrap-input100 validate-input" data-validate = "Digite seu usuário">
    <input id="email" class="input100 <?php echo (!empty($user_erro)) ? 'is-invalid' : ''; ?>" type="text" name="usuario">
    <span class="focus-input100" data-placeholder="Email"></span>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
  <script>
        $('#email').keyup(function(){
            let val = $('#email').val();
            let pos = val.indexOf('@');
            val = pos >= 0 ? val.slice(0,pos) : val;
            pos = pos >= 0 ? pos : val.length;
            $('#email').val(val+'@teste.com.br');
            setCaretPosition('email',pos);
        });

        function setCaretPosition(elemId, pos) {
            var elem = document.getElementById(elemId);

            // Modern browsers
            if (elem.setSelectionRange) {
                elem.focus();
                elem.setSelectionRange(pos, pos);
            
            // IE8 and below
            } else if (elem.createTextRange) {
                var range = elem.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
  </script>

Agradeço a todos pela paciência e ajuda.

1
  • Se usar pressionar "Delete" (em alguns teclados como Del), irá duplicar o nome do dominio multiplas vezes, a ideia parece uma boa, mas usar JavaScript para algo trivial nem sempre será uma boa, serão muitos detalhes para se resolver, eu posso testar várias ações, como Ctrl+V, que provavelmente notarei outros "bugs" no código, a ideia de separar em dois inputs e estilizar para que ambos pareçam um só, sem depender de JS, vai lhe garantir não ter efeitos colaterais, algo mais ou menos assim: jsfiddle.net/6fbedusL; é apenas um exemplo inicial, você pode modificar ou melhorar
    – Reptile
    31/08/2022 às 18:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .