Champs mail a moitié readonly

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Champs mail a moitié readonly

Re: Champs mail a moitié readonly

par ynx » 11 déc. 2021, 13:01

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/

Champs mail a moitié readonly

par Tryptan » 09 déc. 2021, 18:31

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 :)