如何在電子郵件地址輸入字段中顯示默認域名？

Question

我有一個需要電子郵件地址和密碼的網站登錄表單。 大多數用戶具有相同的電子郵件地址域，但少數用戶具有來自不同域的電子郵件地址。

有沒有辦法在電子郵件地址輸入字段中自動使用默認域名，同時仍然允許用戶鍵入不同的域名？

例如，如果| 是光標，鍵入時輸入看起來像這樣：

|@defaultreallylongdomain.com （用戶尚未輸入任何內容）

b|@defaultreallylongdomain.com

bo|@defaultreallylongdomain.com

bob|@defaultreallylongdomain.com

bob@|defaultreallylongdomain.com

鮑勃@ G |

。

。 （用戶不斷輸入）

。

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