Limiter une TextBox Multiligne (TEXTAREA)Désolé pour le style, j'ai eu un petit problème et j'arrive pas à changer....
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>
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
Partager