IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Annuler un évènement après qu'il se soit réalisé


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Femme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2011
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Janvier 2011
    Messages : 36
    Par défaut Annuler un évènement après qu'il se soit réalisé
    Bonjour,

    J'ai une appli qui contient une div éditable, dans laquelle un utilisateur peut écrire du texte et le mettre en forme. Cette div a une largeur et une hauteur fixe à ne pas dépasser.
    Pour limiter en largeur, j'ai géré ça en CSS avec un max-width et un word-wrap: break-word;

    Pour limiter le texte en hauteur, j'ai beaucoup plus de mal...
    J'ai trouvé une bonne solution en bloquant l'evenement keydown si offsetHeight < scrollHeight
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    $("#editeur").on("keydown", function(e){
    	var element = this;
    	if ((element.offsetHeight < element.scrollHeight)) {
    	    e.preventDefault();
    	}
    });
    Malheureusement, cela ne me permet pas d'annuler la frappe la première fois que le texte va dépasser. Je m'explique : si j'arrive à la limite de la div et que je tape "Entrée" pour faire un saut de ligne, au passage dans la fonction, l'évènement ne sera pas annulé puisqu'à ce moment là (avant que le saut de ligne ne soit effectif), le texte ne dépasse pas encore. Ce n'est qu'au caractère suivant frappé que les évènements seront annulés, et je n'ai plus non plus la possibilité de modifier le texte existant puisque je serai toujours dans le cas où element.offsetHeight < element.scrollHeight

    Je voudrais donc trouver un moyen, si cela existe, d'aller au bout de l'évènement keydown (ou keypress?), de controler la différence entre offsetHeight et scrollHeight puis d'annuler l'évènement si cela ne va pas.

    J'ai bien essayé de stocker dans une variable js le dernier évènement pour pouvoir le supprimer ensuite mais cela ne fonctionne pas.

    Quelqu'un peut-il m'aider?

    Par avance, merci, et bonne journée.

  2. #2
    Membre éprouvé
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Avril 2003
    Messages
    1 309
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Avril 2003
    Messages : 1 309
    Par défaut
    Bonjour,

    je vois deux possibilités :
    1. Avant : vous pouvez bloquer la touche entrée si element.offsetHeight < element.scrollHeight moins "je ne sais pas combien".
    2. Après : vous supprimer le dernier caractère ("entrée) du texte de la div.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    Citation Envoyé par Lucille94 Voir le message
    ...Cette div a une largeur et une hauteur fixe à ne pas dépasser...
    Quel est le but de la manoeuvre ?

    Car "largeur et hauteur fixe" ne veulent pas dire grand chose sur un site/appli "responsive".

    • Est-ce le nombre de caractères affichés (hors balises HTML) qui compte ?
    • Le "volume" de caractères ? (dû aux balises HTML : avec mise en forme, saut de ligne,...) ?
    • est-ce donc un textarea avec Wysiwyg (permettant une mise en forme HTML) ? ou pas ?
    • ...

    Enfin : pourquoi vouloir "empêcher le texte de dépasser" ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Généralement on cherche plutôt à limiter le nombre de caractères et non la taille qu'ils occupent (ce qui est la même chose pour les polices de caractères à chasse fixe ou monospace). L'attribut maxlength de textarea sert à ça.

    Comme l'explique jreaux62, limiter par la taille n'a pas beaucoup de sens puisque la taille d'un texte dans un bloc donné peut changer pour plein de raisons: niveau de zoom du navigateur, taille de l'écran, police plus grande pour les déficients visuels, police ou interligne personnalisé...

  5. #5
    Membre averti
    Femme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2011
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Janvier 2011
    Messages : 36
    Par défaut
    Bonjour,

    Merci pour vos réponses.

    Oui il s'agit bien d'une fonctionnalité d'édition WYSIWYG. L'utilisateur personnalise d'abord la taille de son bloc de texte en cm et écrit son texte. Il peut en changer la taille, la police, le style, la couleur, l'alignement, ... La zone éditable est une div (contentEditable=true) et pas un textArea. Les modifications sur le texte sont réalisées avec execcommand. L'interface ressemble assez à ce que l'on a quand on créé un nouveau message sur ce forum. Le but étant d'imprimer le tout, c'est pour cela que je ne veut pas que ça "dépasse".

    Il y a donc plusieurs façons pour le texte de déborder en hauteur : ajout d'un caractère, saut de ligne, changement de taille de texte, changement de police, passage en gras.
    Pour les 2 premières façons, j'essaye de contrôler ce qui se passe avec l'évènement keydown. Pour le reste, j'ai vu qu'il existait la commande 'undo', mais je n'ai pas encore creusé plus que ça.

    1. Avant : vous pouvez bloquer la touche entrée si element.offsetHeight < element.scrollHeight moins "je ne sais pas combien".
    2. Après : vous supprimer le dernier caractère ("entrée) du texte de la div.
    La solution de Christophe P. me semble assez proche de ce que j'avais en tête, tout le problème étant de mesurer ce "je ne sais pas combien".

    Bonne journée à tous.

  6. #6
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Il y a aussi la possibilité de mettre un max-height et un overflow:hidden. Cela n'empêchera pas l'utilisateur de saisir du texte, mais le fait qu'il ne puisse pas le voir à l'écran devrait le dissuader d'aller au delà de la taille de la case.

  7. #7
    Membre averti
    Femme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2011
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Service public

    Informations forums :
    Inscription : Janvier 2011
    Messages : 36
    Par défaut
    Oui bien sûr, mais comme je souhaite récupérer le html pour l'intégrer dans d'autres applications, il faudrait que je puisse récupérer seulement la partie "visible".

    Donc, il n'y a pas moyen d'annuler un évènement une fois réalisé?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 7
    Dernier message: 25/04/2008, 14h52
  2. creer une nstance apres que le produit soit installe ?!
    Par ChristopheOce dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 03/09/2007, 16h13
  3. [VBA-E]Pouvoir Annuler et Rétablir aprés execution macro
    Par zoumzoum59 dans le forum Macros et VBA Excel
    Réponses: 2
    Dernier message: 05/02/2007, 22h51
  4. Événement après escape
    Par steps5ive dans le forum Access
    Réponses: 7
    Dernier message: 30/05/2006, 20h23
  5. Réponses: 10
    Dernier message: 23/11/2005, 21h20

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo