JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" name="email1" value="@test.com" class="domain-fixed" data-domain="@test.com">
<input type="text" name="email2" value="@exemple.fr" class="domain-fixed" data-domain="@exemple.fr">
JavaScript
const domainFixedInputs = document.querySelectorAll('.domain-fixed');
domainFixedInputs.forEach(function(input) {
input.addEventListener('keydown', function(e) {
if (e.key == '@') {
e.preventDefault();
return false;
}
});
input.addEventListener('keyup', function(e) {
let parts = this.value.split('@');
this.value = parts[0] + this.dataset.domain;
});
input.addEventListener('focus', function(e) {
let parts = this.value.split('@');
this.setSelectionRange(parts[0].length, parts[0].length);
});
});