The example below acts as you have requested, I've added in some error checking and usability improvements. Hopefully this is roughly what you needed and can tweak this for your specific case.
It converts any domain provided into a hostname as per the answer here. Effectively using a trick using an a tag.
User changes into the email input automatically have the correct domain added as a suffix, values are gathered or set using .val() and strings manipulated using .substr() or .replace(). The user's position is not lost so they can continue to type as they enter their username using .setSelectionRange().
Error checking is performed on the email input, although this is less necessary as we are leading the user to the correct input by automatically adding the correct hostname suffix. It will reject input that does not end with the correct hostname, or that has multiple "@" by using .split("@").length (as we know the resultant array of a correctly formatted email should only have two elements).
A message is shown informing the user if there is an error (via CSS styling and .show()), this persists once shown as otherwise it would be automatically hidden with the automatic correction. The specific hostname required is provided in the message, and updated with changes to the user inputed domain.
The code is fully commented so should be self-explainatory.
DEMONSTRATION
// Setup variables to help simplify code later
var username = "";
var domain = "";
var emailDomain = "";
// Load initial values (not needed in reality unless you want to suggest a domain to users)
domain = url_domain($("#domain").val());
emailDomain = "@" + domain;
$("#hostname").text(emailDomain);
// Key track of current domain
$("#domain").on('keyup input change', function() {
// Update variables
domain = url_domain($(this).val());
emailDomain = "@" + domain;
// Update error message
$("#hostname").text(emailDomain);
});
// Check user input on email
$("#email").on('keyup input change', function() {
// Get username (by removing auto added domain if present)
username = $(this).val().replace(emailDomain, "");
// Add domain back / initially
$(this).val(username + emailDomain);
// Set selection to appropriate place on username
// Improves user experience
document.getElementById('email').setSelectionRange(username.length, username.length);
// Prepare for error checking
val = $(this).val();
// Ensure the correct domain is at the end of the address, and that two domains are not provided.
if (val.substring(val.length - emailDomain.length) != emailDomain || val.split("@").length > 2) {
// Show warning if error present
$("#email-warning").show();
// Remove extra /incorrect domain
$(this).val(val.substr(0, val.indexOf("@")));
}
});
// Gets hostname from domain passed to it
// Original answer - https://stackoverflow.com/questions/8498592/extract-hostname-name-from-string
function url_domain(data) {
var a = document.createElement('a');
a.href = data;
return a.hostname;
}
#email-warning {
color: red;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="domain" value="http://google.com">
<input id="email" placeholder="E-mail">
<p id="email-warning">You can only register with an email linked to your domain (<span id="hostname"></span>).</p>
