JQuery mask use to a fixed domain email

user_19291802 0
Viewed 26

I'm trying set fixed email mask, but it's not working...

  <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}@test.com.br', {'translation': { "A": { pattern: /[\w@\-.+]/, recursive: true }},reverse: true});
    });
  </script>

If fixes at one char only "/ I need unlimited, but i don't know what i'm doing wrong.

mask jquery javascript
2 Answers

I suggest you default your input to user@example.com. When a user focuses the field, select the username so that when the user starts typing they'll overwrite the user but the domain name will stay intact.

Implementing what you want and not losing default behavior of a text field can be very hard. Your current solution breaks a lot of the existing behavior of input fields such as DELETE, arrows, ctrl+a, shift+arrow, ...

document.querySelector("input[name=email]").addEventListener("focus", (e) => {
  const input = e.target;
  const currentText = e.target.value;
  const indexOfAt = currentText.indexOf("@");
  if ( indexOfAt != -1) {
     input.setSelectionRange(0, indexOfAt);
  }
})
<label>
Name <input name="name" />
</label>
<br />

<label>
Email <input name="email" pattern="[\w+@-]+@test\.com\.br" value="user@test.com.br" />
</label>

user_2272990

Solved.

  • Got "@" position, then sliced string to remove everything from "@" (always checking if pos == -1) and then insert "@test.com.br";
  • In the end i used "setCaretPosition" to set cursor before "@".

Snippet with code below:

  <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+'@test.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>

user_192918020
Related