Mise forme du texte dans une TEXTAREA
bonjour,
j'essaie de créer une boite de texte avec des boutons pour changer la mise en forme du texte
html:
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
| <!DOCTYPE html5>
<!--[if lt IE 7 ]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" charset="UTF-8" content="text/html">
<title>MESSAGE</title>
<link href="css/styles/reset.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/styles/page.css">
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<meta name="viewport" content="width=device-width">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<section>
<nav>
<button id="maj"><img src="img/btn/uppercase.jpg" width="45" height="45" alt=""></button>
<button id="min"><img src="img/btn/minuscule.jpg" width="45" height="45" alt=""></button>
<button id="b"><img src="img/btn/bold.jpg" width="45" height="45" alt=""></button>
<button id="u"><img src="img/btn/underliined.jpg" width="45" height="45" alt=""></button>
<button id="i"><img src="img/btn/iitalic.jpg" width="45" height="45" alt=""></button>
<button id="pmaj"><img src="img/btn/smallcaps.jpg" width="45" height="45" alt=""></button>
<button id="r"><img src="img/btn/red.jpg" width="45" height="45" alt=""></button>
<button id="l_t"><img src="img/btn/line_through.jpg" width="45" height="45" alt=""></button>
</nav>
<form>
<textarea id="t" rows="15" cols="70"></textarea>
</form>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html> |
js:
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
| var text_sel;
function addEvent(element, event, func) { // Une fonction pour gérer les événements sous tous les navigateurs
if (element.attachEvent) {
element.attachEvent ('on' + event, func);
}
else {
element.addEventListener (event, func, false);
}
};
function getSelected() {
if(window.getSelection) { return window.getSelection(); }
else if(document.getSelection) { return document.getSelection(); }
else {
var selection = document.selection && document.selection.createRange();
if(selection.text) { return selection.text; }
return false;
}
return false;
}
var t = document.getElementById('t');
addEvent (t, 'select', function () {
text_sel = getSelected();
var ts = text_sel.style;
var maj = document.gettElementById('maj');
addEvent (maj, 'click', function () {
ts.textTransform = 'uppercase';
});
var min = document.gettElementById('min');
addEvent (min, 'click', function () {
ts.textTransform = 'lowercase';
});
var pmaj = document.gettElementById('pmaj');
addEvent (pmaj, 'click', function () {
ts.fontVariant = 'smalllcaps';
});
var b = document.gettElementById('b');
addEvent (b, 'click', function () {
ts.fontWeight = 'bold';
});
var u = document.gettElementById('u');
addEvent (u, 'click', function () {
ts.textDecoration = 'underline':
});
var i = document.gettElementById('i');
addEvent (i, 'click', function () {
ts.fontStyle = 'italic';
});
var r = document.gettElementById('r');
addEvent (r, 'click', function () {
ts.color = 'red';
});
var l_t = document.gettElementById('l_t');
addEvent (l_t, 'click', function () {
ts.textDecoration = 'line-through';
});
}); |
