Limiter une TextBox Multiligne (TEXTAREA)
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 :


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