[JavaScript] [SRC] Limiter une TextBox Multiligne (TEXTAREA) - HTMLShape

FremyCompany · 19/01/2007, 15h42

Citation:

Limiter une TextBox Multiligne (TEXTAREA)

Citation:

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<HTML>
 <BODY>
  <SCRIPT><!--
function getPosition(node) {
      var left=node.offsetLeft;
      var top =node.offsetTop;
      while(node.offsetParent) {
            node=node.offsetParent;
            left+=node.offsetLeft;
            top +=node.offsetTop;
      }
      return {"left":left,"top":top };
}
function getShape(o) {
  var shape = {};
  shape.width = o.offsetWidth;
  shape.styleWidth = parseInt(o.style.width);
  shape.height = o.offsetHeight;
  shape.styleHeight = parseInt(o.style.height);
  shape.styleIsRespected = true;
  if (isFinite(shape.styleWidth)) {
    shape.styleIsRespected = shape.styleIsRespected && (shape.width == shape.styleWidth);
  }
  if (isFinite(shape.styleHeight)) {
    shape.styleIsRespected = shape.styleIsRespected && (shape.height == shape.styleHeight);
  }
  shape.virtualWidth = o.scrollWidth || shape.width;
  shape.virtualHeight = o.scrollHeight || shape.height;
  shape.pos = getPosition(o);
  shape.top = shape.pos.top;
  shape.left = shape.pos.left;
  shape.toString=function() {
    var str = "{\n";
    for (key in this) {
        str += key + ":" + this[key] + "\n";
    }
    str += "}";
    return str;
  }
  return shape;
}
function getTextShape(text, styleWidth, styleHeight, className) {
  if (!text) { text = ""; }
  if (!styleWidth) { styleWidth="auto"; }
  if (!styleHeigth) { styleHeight="auto"; }
  if (!className) { className=""; }
  var o = document.createElement("DIV");
  try {
    o.style.visibility = "hidden";
    o.style.position = "absolute";
    o.style.top="-1000px"; o.style.left="-1000px";
    o.style.width = styleWidth;
    o.style.height = styleHeight;
    o.className = className;
  } catch (ex) {}
  document.body.appendChild(o);
  o.appendChild(document.createTextNode(text.replace(new RegExp("\\n","gi"), "[BR]")));
  o.innerHTML = o.innerHTML.replace(new RegExp("[BR]", "g"), "<br/>")
  var shape = getShape(o);
  document.body.removeChild(o);
  return shape;
}
function limit(o) {
  var newValue = "";
  var mRows = o.rows;
  var mCols = o.cols;
  // Opéra et FF renvoie -1/0 si cols/row n'est pas défini
  // Il faut donc les calculer soi-même avec le SHAPE
  if (mRows < 1 || mCols < 1) {
    if (false) { // A oublier
        mRows = 2;
        mCols = 22;
    } else {
        var shape = getShape(o);
        mCols = parseInt((shape.width - 2) / 8.18)
        mRows = parseInt((shape.height - 2) / 16.3);
    }
  }
  var rows = 0;
  var cols = 0;
  for (var i=0; i<o.value.length; i++) {
    var theChar = o.value.charAt(i);
    //alert("'" + theChar + "'")
    if (theChar == "\n") {
        rows++;
        if (rows == mRows) {
            i=o.value.length;
            cols = 0;
        } else {
            newValue += "\n";
            cols = 0;
        }
    } else if (theChar == "\r") {
        // Trap;
    } else {
        if (cols != mCols) {
            newValue += theChar;
        } else {
            rows++;
            if (rows == mRows) {
                i=o.value.length;
                cols = 0;
            } else {
                newValue += "\n";
                newValue += theChar;
                cols = 0;
            }
        }
        cols++;
    }
  }
  //alert("'" + newValue + "'")
  rows++;
  alert(rows + "/" + mRows + "\n" + mCols);
  o.value=newValue;
  o.scrollTop = 0;
  o.scrollLeft = 0;
}
  --></SCRIPT>
  <TEXTAREA style="overflow:hidden; padding:0px; border: inset 1px" onchange="limit(this)" onkeyup="//limit(this)"></TEXTAREA>
 </BODY>
</HTML>

Désolé pour le style, j'ai eu un petit problème et j'arrive pas à changer....
Bon, une petite explication s'impose :

Citation:

getShape(o) :
- o : un noeud XHTML
- returnValue : un objet SHAPE
getPosition(o) :
- o : un noeud XHTML
- returnValue : un objet POSITON
getTextShape(text, sW, sH, className)
- text : un texte (JavaScript)
- sW : une taille width prédéfinie
- sH : une taille height prédéfinie
- className : une classe CSS prédéfinie
- returnValue : un objet SHAPE
limit(o) :
- o : un noeud XHTML (TEXTAREA)

POSITION :
- top
- left

SHAPE :
- width : taille W à l'écran
- height : taille H à l'écran
- styleWidth : taille W demandée par le style
- styleHeight : taille H demandée par le style
- virtualWidth : taille W (scrollable)
- virtualHeight : taille H (scrollable)
- isStyleRespected : boolean (taille écran = taille style)
- pos : POSITON (position du shape)
- left : pos.left
- top : pos.top

Auteur · 25/01/2007, 21h41

J'ai deux questions :

Code :

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

1
2
        mCols = parseInt((shape.width - 2) / 8.18)
        mRows = parseInt((shape.height - 2) / 16.3);

peux-tu m'expliquer les valeurs 8.18 et 16.3 (avec, visiblement, 16.3~8.18*2) ?

Code :

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

if (isFinite(shape.styleWidth))

peux-tu me définir la fonction isFinite ?

FremyCompany · 25/01/2007, 22h20

Les constantes 16.3 et 8.18, c'est la taille en pixel d'un caractère dans une
TextBox (input)... En fait, on cherche rows et cols, donc on divise la taille du controle (moins les bords) par la taille d'un caractère...

isFinite (n) --> n != NaN --> Est ce qu'un style est défini ?
Si oui, alors valider la taille, si non, mettre true

Auteur · 26/01/2007, 11h58

Citation:

Envoyé par FremyCompany

Les constantes 16.3 et 8.18, c'est la taille en pixel d'un caractère dans une TextBox (input)... En fait, on cherche rows et cols, donc on divise la taille du controle (moins les bords) par la taille d'un caractère...

si je definis dans ma feuille de style une police de 12pt ou une police de 20pt, quelles valeurs prendront ces constantes ?

FremyCompany · 26/01/2007, 17h07

Citation:

Envoyé par Auteur

si je definis dans ma feuille de style une police de 12pt ou une police de 20pt, quelles valeurs prendront ces constantes ?

Aucune idée !

Enfait, il faut que tu en fasse le calcul toi-même... Ici je part du principe que la police est standard... ce qui est souvent le cas

Mais sinon, fait comme moi-même pour faire le test :

Code :

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

<textarea style="...; width: 502px; height: 502px; border: 1px solid black"></testarea>

Puis tu compte le nombre de caractère qui rentre dans un ligne et le nombre de ligne, que tu divise par 500...

Note que si tu utiliser rows et cols, c'est inutile, normalement

25/01/2007, 22h20	#3
FremyCompany Expert Confirmé Étudiant Inscription : février 2006 Messages : 2 532 Détails du profil Informations personnelles : Âge : 20 Informations professionnelles : Activité : Étudiant Informations forums : Inscription : février 2006 Messages : 2 532 Points : 2 903 Points : 2 903	Les constantes 16.3 et 8.18, c'est la taille en pixel d'un caractère dans une TextBox (input)... En fait, on cherche rows et cols, donc on divise la taille du controle (moins les bords) par la taille d'un caractère... isFinite (n) --> n != NaN --> Est ce qu'un style est défini ? Si oui, alors valider la taille, si non, mettre true __________________ Fremy Pour vos développements Web et une navigation agréable, le tout gratuit : 1) IE 8 + IE7Pro (Si vous ne connaissez pas IE7Pro, essayez !) 2) FF 3 + Web Developper Toolbar + AdBlockPlus + FireBug + GreaseMonkey
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email