[SRC] Limiter une TextBox Multiligne (TEXTAREA) - HTMLShape
Citation:
Limiter une TextBox Multiligne (TEXTAREA)
Citation:
Code:
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
