Как показать имя домена по умолчанию в поле ввода адреса электронной почты?

Question

У меня есть форма для входа на сайт, который требует адрес электронной почты и пароль. Большинство пользователей имеют один и тот же домен адресов электронной почты, но несколько пользователей имеют адреса электронной почты из другого домена.

Есть ли способ автоматически использовать доменное имя по умолчанию в поле ввода адреса электронной почты, при этом позволяя пользователю вводить другое доменное имя?

Например, если | это курсор, ввод будет выглядеть примерно так при наборе:

|@defaultreallylongdomain.com (пользователь еще ничего не набрал)

b|@defaultreallylongdomain.com

bo|@defaultreallylongdomain.com

bob|@defaultreallylongdomain.com

bob@|defaultreallylongdomain.com

боб @ г |

.

. (пользователь продолжает печатать)

.

bob@gmail.com|

Домен по умолчанию отображается справа от курсора, пока пользователь не начнет вводить имя домена, которое не соответствует домену по умолчанию.

Есть идеи, как этого добиться?

Answer 1

Использование selectionStart

Вот пример:

html

<input id='email' type='text'>

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);

Живая демоверсия

Answer 2

Это довольно не элегантный и простой пример, но вы можете использовать его. По сути, вы могли бы;

1. Предварительно заполните ввод доменом по умолчанию
2. Отслеживать набранный в настоящее время адрес электронной почты
3. Принудительно вводить пользователя в начало ввода при нажатии
4. Если пользователь вводит символ "@", вы знаете, что ему нужен другой домен
5. Заменить введенное значение на то, что набрал пользователь

Как это;

$(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, '');
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="testInput" value="@exampledomain.net">