vraag over jQuery
Ik heb een paragraaf en als je hier op klikt dan verandert dit in een textarea.
In de textarea kun je dan typen.
De bedoeling is als je op de knop (button) klikt dat dan de textarea weer verandert in een paragraaf.
Kan iemand mij hier mee helpen?
Alvast bedankt.
mijn code is:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery_1.7.1.js"></script>
<script>
$(function(){
$('p').bind("click", function(){
$(this).html('<textarea cols="50" rows="10">Text</textarea>');
$(this).unbind("click");
});
});
</script>
</head>
<body>
<h1>klik op test en verander de tekst</h1>
<p>test</p>
<button>verander van textarea naar paragraaf</button>
</body>
</html>
<html>
<head>
<title></title>
<script src="jquery_1.7.1.js"></script>
<script>
$(function(){
$('p').bind("click", function(){
$(this).html('<textarea cols="50" rows="10">Text</textarea>');
$(this).unbind("click");
});
});
</script>
</head>
<body>
<h1>klik op test en verander de tekst</h1>
<p>test</p>
<button>verander van textarea naar paragraaf</button>
</body>
</html>
Code-tags toegevoegd voor leesbaarheid.[/modedit]
Gewijzigd op 07/01/2012 18:29:32 door Chris -
Omdat ze vanaf het begin allebei bestaan heb je ook geen probleem met het opnieuw binden van de functies. Enige waar je nog voor moet zorgen is dat je elke keer de text copieert van de een naar de ander.
Maar mocht je het alsnog willen kijk dan eens naar jQuery.one() voor een 1 malig event en jQuery.replace() voor het vervangen van een div in textarea en dan als laatst nog jQuery.html() om de HTML van het andere element te pakken.
Overigens raad ik je wel aan om te werken met ID's en classes, zeker als je straks een uitgebreider document gaat krijgen.
@WouterJ: Lang niet alle browsers zijn HTML5-compatible, dit zijn er echt nog maar weinig. Enkel de allernieuwste browsers, en HTML5 is voor zover ik weet nog niet af én nog niet de nieuwste standaard(?)
Zo werkt contentEditable ook. IE heeft het attribuut geïntroduceerd in July 2000, samen met IE5.5
Andere browsers hebben het rond 2006 overgenomen en dat betekend browser support voor: IE5.5+; FF3+; Safari 3+; Chrome; Opera 9