HTML kôd:
<html>
<head>
<style type="text/css">
#realedit {
font-family: courier new;
font-size: 10pt;
/*background-color: #efe;*/
border: solid 1px black;
width: 200px;
height: 20px;
}
#divedit {
font-family: courier new;
font-size: 10pt;
/*background-color: #fee;*/
border: solid 1px black;
width: 200px;
height: 20px;
overflow: hidden;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var colors = ['blue', 'green', 'red'];
var colorindex = 0;
function recolor(element, text) {
element.empty();
text.replace(/(\S+)/gi, function(m) {
element.append($('<span style="color:' + colors[colorindex] + '">' + m + ' </span>'));
colorindex++;
colorindex %= colors.length;
return m;
});
}
function hideedit() {
$('input#realedit').hide();
$('div#divedit').show();
recolor($('div#divedit'), $('input#realedit').val());
}
function showedit() {
$('input#realedit').show();
$('div#divedit').hide();
}
$(function() {
$('input#realedit').blur(hideedit);
$('div#divedit').click(showedit);
hideedit();
});
</script>
</head>
<body>
<div id="divedit"></div>
<input type="text" id="realedit" value="trla baba lan" />
</body>
</html>
Sve ovo treba malo stilizovati, vidi se razlika između diva i edita...
Off Topic: Hehe, vidi se da sam već dao otkaz...
