Forum d'entraide PHPFrance

Bonjour,

J'ai un champs email, je voudrais faire en sorte que la partie après le @ ne soit pas saisissable, et qu'elle soit fixe.
J'ai en HTML un champs input pour mon champs email.
Je dois éviter de changer le template HTML.
On pourrait faire deux champs avec le deuxième en readonly et en JS faire une bricole pour en remplir un troisieme caché qui serait le vrai champs mail. Mais ce serait a éviter.

Le défi est donc de faire cela en jquery ou javascript.
Peut être faire en sorte que dès qu'on écrit dans ce champs on fait apparaitre la partie après le arobase et qu'elle ne soit pas effaçable. Un truc dans ce gout là.

Ca parait compliqué pour pas grand chose.

Si quelqu'un a une idée, je suis preneur

Bonjour,

Un prototype possible :
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">

JS

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

Démo : https://jsfiddle.net/gzfaL791/