如何在电子邮件地址输入字段中显示默认域名？答案

【问题标题】：How to show a default domain name in an email address input field?如何在电子邮件地址输入字段中显示默认域名？
【发布时间】：2019-06-12 04:07:43
【问题描述】：

我有一个需要电子邮件地址和密码的网站的登录表单。大多数用户拥有相同的电子邮件地址域，但少数用户拥有来自不同域的电子邮件地址。

有没有办法在电子邮件地址输入字段中自动使用默认域名，同时仍允许用户输入不同的域名？

例如，如果 |是光标，输入时输入看起来像这样：

|@defaultreallylongdomain.com （用户尚未输入任何内容）

b|@defaultreallylongdomain.com

bo|@defaultreallylongdomain.com

bob|@defaultreallylongdomain.com

bob@|defaultreallylongdomain.com

鲍勃@g|

.

。 （用户不断输入）

.

bob@gmail.com|

默认域显示在光标右侧，直到用户开始输入与默认域不匹配的域名。

关于如何实现这一点的任何想法？

【问题讨论】：

到目前为止你尝试过什么？分享一些代码
我什么都没试过。我不确定如何解决这个问题。

标签： javascript html forms

【解决方案1】：

使用selectionStart

示例如下：

html

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

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

【讨论】：

【解决方案2】：

这是一个非常不雅且基本的示例，但您可以在此基础上进行构建。本质上，你可以；

使用默认域预填充输入
跟踪当前输入的电子邮件
点击时强制用户开始输入
如果用户键入“@”字符，您就知道他们想要一个不同的域
将输入值替换为用户目前输入的内容

像这样;

$(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">

【讨论】：