Discussion :

[proner]

Bonjour,

je cherche un moyen permettant de détecter le dépassement de la zone de saisie dans un textarea afin d'afficher un message indiquant cet état de fait.

En gros si dans un textArea, le scroll horizontal venait à apparaitre, je souhaite pouvoir afficher une alert ("Zone d'édition dépassée").

Ca doit bien exister, justement parce que le navigateur gère bien l'évènement et affiche le scroll, mais pas moyen de trouver plus d'info que ça.

Toutes les idées et exemples sont les bienvenus.

Merci A+

[marcha]

Salut,

J'ai cherché et j'ai pas trouvé non plus :-) je pensait à l'événement onscroll
qui permet de savoir quand on agit sur une barre de défilement, mais ça
marche pas sur les textarea (en tout cas pas sur FF)

Voici une idée pour contourner le problème

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
window.onload = function() {
	document.getElementById('ta').onkeypress = function() {
		if(document.getElementById('ta').scrollLeft>0) {
			alert('trop grand');
		}
	};
}
 
<textarea id='ta' wrap='off' cols='20' rows='10'></textarea>

Mais sur mon Linux / FF il semblerait qu'il faille dépasser de deux caractères
la zone de saisie pour qu'il détecte le scroll, c'est étrange, je te laisse
essayer.

[Bisûnûrs]

J'aurais plutôt fait comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function test(obj){
   if(obj.scrollLeft > 0) {
      alert('trop grand');
   }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea id='ta' wrap='off' cols='20' rows='10' onkeyup="test(this)" onkeydown="test(this)"></textarea>

[marcha]

+1 Bisûnûrs, je pense que c'est plus prudent. Et ça corrige le petit problème
que j'avais remarqué plus haut.

Ce qui m'amène à modifier ma solution pour intégrer la tienne, tout en
évitant d'avoir des attributs évènementiels dans le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
window.onload = function() {
    var e = document.getElementById('ta');
    e.onkeyup = test;
    e.onkeydown = test;
}
 
function test(){  
  if(this.scrollLeft > 0) {  
    alert('trop grand'); 
  } 
}

Reste le problème si l'utilisateur colle du text dans le champ !

[proner]

Bravo et merci à vous 2. J'avais bien commencé à chercher du coté du scroll, mais sans plus d'idée que ça.

Ca fonctionne parfaitement.

Encore merci