How to show a default domain name in an email address input field?

Question

I have a login form for a website that requires email address and password. Most users have the same email address domain, but a few users have email addresses from a different domain.

Is there a way to automatically use a default domain name in the email address input field, while still allowing the user to type in a different domain name?

For example, if | is the cursor, the input would look something like this while typing:

|@defaultreallylongdomain.com (user hasn't typed anything yet)

b|@defaultreallylongdomain.com

bo|@defaultreallylongdomain.com

bob|@defaultreallylongdomain.com

bob@|defaultreallylongdomain.com

bob@g|

.

. (user keeps typing)

.

bob@gmail.com|

The default domain shows up to the right of the cursor, until the user starts typing a domain name that doesn't match the default domain.

Any ideas on how to accomplish this?

user_3784705 · Answer

Use selectionStart

Here is example:

html

js

const input = document.getElementById('email');
const defaultEmail = '@gmail.com';
input.value = defaultEmail;

function handleInput() {
    const val = input.value;
    const sel = input.selectionStart;
    if (val.length - defaultEmail.length < sel) {
        input.value = val.slice(0, sel)
        input.removeEventListener('input', handleInput);
        input.removeEventListener('focus', handleInput);
        input.removeEventListener('click', handleInput);
    }
}

input.addEventListener('input', handleInput);
input.addEventListener('focus', handleInput);
input.addEventListener('click', handleInput);

Live demo

user_5312731 · Answer

This is pretty inelegant and basic example, but you could build on it. Essentially, you could;

Pre-fill the input with the default domain
Keep track of the currently typed email
Force the user to the start of the input when clicked
If the user types a "@" character, you know they want a different domain
Replace input value with what the user has typed so far

Like this;

$(document).ready(function(){
  let defaultDomain = 'exampledomain.net'; // use this to remove later
  let input = $("#testInput");
  let typed = ""; // keep track of what the user has typed
  
  // put cursor at start when clicked
  input.click(function(){
   $(this).get(0).setSelectionRange(0,0);
  })
  
  input.keydown(function(e){
    // @ is keycode 192
    if(e.keyCode === 192){
      // the user has typed @ and you can assume that they want a different domain
      input.val(typed.substring(0, typed.length - 1));
    }else{
        // store the email the user has typed so far, minnus default domain
        typed = input.val().replace(defaultDomain, '');
    }
  })
})

How to show a default domain name in an email address input field?

2 Answers