Ciao,
per ciò che riguarda l'aspetto è semplice: ti basta predisporre una div e mediante css gli dai un'immagine di sfondo raffigurante le righe (o i quadretti) del quaderno. Imposterei anche un line-height, così da essere sicuro che su ogni browser la riga sia alta sempre un numero di pixel ben determinato.
Una cosa del genere:
<style>
#quaderno {background-image:url('images/righe-quaderno.png'); line-height:20px;}
</style>
Come mai hai escluso le textbox (o le textarea)? E' perché non si riesce a misurare il numero di righe di testo contenute in esse? Se è per questo motivo, potresti usare una div che abbia l'attributo
contenteditable settato su true. Sembra
ben supportato dai maggiori browser.
Così facendo, l'utente potrà digitare del testo all'interno della div, modificandone il contenuto. Questa tecnica è usata anche dall'applicazione
Quick Note di Chrome che penso che sia simile a ciò che vuoi realizzare tu. Magari dai una sbirciata al suo javascript.
Usare una <div contenteditable="true"> ti consente di misurare l'altezza del testo, così sai quando il foglio di quaderno è stato riempito. Prova con questo esempio che invoca una funzione javascript alla pressione di ogni tasto:
<style>
#quaderno {line-height:20px; background-image:url('images/righe-quaderno.png')}
</style>
<script type="text/javascript">
function misuraAltezza(div){
//offsetHeight mi restituisce l'altezza della div
if (div.offsetHeight > 200){ //cioè, maggiore di 10 righe
alert("Il limite è stato raggiunto, qui va il codice javascript per cambiare pagina");
}
}
</script>
<div id="quaderno" contenteditable="true" onkeyup="javascript:misuraAltezza(this);">
scrivi qui
</div>
Quando arriva il momento di cambiare pagina, potresti creare dinamicamente un nuovo elemento <div> da sovrapporre al precedente, che verrebbe nascosto. Avresti un div per ciascuna pagina di quaderno.
Al momento di salvare i dati, puoi recuperare il contenuto da ciascuna div grazie alla proprietà .innerHTML (o .innerText).
ciao,
Modificato da BrightSoul il 24 settembre 2011 23.28 -
