Realizzazione testo input visualizzato su schermo

**punticci** · 13-07-2012, 11:06

Spiego meglio cosa vorrei fare... Dovrei creare praticamente un'app (o anche qualcosa che giri in web su un browser va benissimo) che mi consente mi far visualizzare il testo che sto scrivendo (se il testo è justified meglio) e che poi al click di un pulsante o ancora meglio al click di un tasto da tastiera, mi elimina il testo appena scritto..ho trovato una libreria che fa questa ultima cosa qui: http://www.openjs.com/scripts/events...ard_shortcuts/ il che è già qualcosa.. Mi manca la prima parte.. Ho pensato ad una semplice textarea magari allargata a tutta pagina ma non posso giustificare il testo.. Inoltre lo sfondo della pagina sarà un'immagine e le scritte che voglio scrivere dovranno comparire sopra all'immagine (quindi anche per questo motivo la textarea la scarto)...Idee? Grazie

**cavicchiandrea** · 13-07-2012, 11:21

textarea per scrivere il testo e affianco (sopra/sotto) div con sfondo immagine e con onkeyup/press "trasferisci" il testo del div document.getElementById('ID_DIV_TESTO').innerHTML= this.value il div lo formatterai come vuoi (giustificato grassetto etc...) con i css

**carlomarx** · 13-07-2012, 12:04

Esempio base già pronto...:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
	function insertMetachars(sStartTag, sEndTag) {
		var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
		oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
		oMsgInput.focus();
	}

	function makePreview() {
		document.getElementById("anteprima").innerHTML = document.myForm.myTxtArea.value;
	}
</script>
<style type="text/css">
	#anteprima {
		padding: 4px;
		width: 392px;
		height: 292px;
		border: 1px #cccccc solid;
		float: left;
		margin-right: 5px;
		overflow: auto;
	}

	#messaggio {
		width: 400px;
		height: 300px;
		border: 1px #cccccc solid;
	}

	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>
<div id="anteprima">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</div>


<textarea id="messaggio" name="myTxtArea" onkeyup="makePreview();" onchange="makePreview();">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</textarea></p>
</form>

</body>
</html>

**punticci** · 13-07-2012, 12:05

Originariamente inviato da cavicchiandrea
textarea per scrivere il testo e affianco (sopra/sotto) div con sfondo immagine e con onkeyup/press "trasferisci" il testo del div document.getElementById('ID_DIV_TESTO').innerHTML= this.value il div lo formatterai come vuoi (giustificato grassetto etc...) con i css

Grazie mille!! :-D ma in jquery dici che si può fare?tipo con un append o un html? (intendo per "trasferire il contenuto")

**punticci** · 13-07-2012, 13:19

Originariamente inviato da carlomarx
Esempio base già pronto...:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
	function insertMetachars(sStartTag, sEndTag) {
		var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
		oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
		oMsgInput.focus();
	}

	function makePreview() {
		document.getElementById("anteprima").innerHTML = document.myForm.myTxtArea.value;
	}
</script>
<style type="text/css">
	#anteprima {
		padding: 4px;
		width: 392px;
		height: 292px;
		border: 1px #cccccc solid;
		float: left;
		margin-right: 5px;
		overflow: auto;
	}

	#messaggio {
		width: 400px;
		height: 300px;
		border: 1px #cccccc solid;
	}

	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>
<div id="anteprima">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</div>


<textarea id="messaggio" name="myTxtArea" onkeyup="makePreview();" onchange="makePreview();">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</textarea></p>
</form>

</body>
</html>

MA TE SEI UN GANZO xD ahaha è proprio questo ciò che volevo!grazie

**punticci** · 13-07-2012, 13:35

Originariamente inviato da carlomarx
Esempio base già pronto...:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
	function insertMetachars(sStartTag, sEndTag) {
		var bDouble = arguments.length > 1, oMsgInput = document.myForm.myTxtArea, nSelStart = oMsgInput.selectionStart, nSelEnd = oMsgInput.selectionEnd, sOldText = oMsgInput.value;
		oMsgInput.value = sOldText.substring(0, nSelStart) + (bDouble ? sStartTag + sOldText.substring(nSelStart, nSelEnd) + sEndTag : sStartTag) + sOldText.substring(nSelEnd);
		oMsgInput.setSelectionRange(bDouble || nSelStart === nSelEnd ? nSelStart + sStartTag.length : nSelStart, (bDouble ? nSelEnd : nSelStart) + sStartTag.length);
		oMsgInput.focus();
	}

	function makePreview() {
		document.getElementById("anteprima").innerHTML = document.myForm.myTxtArea.value;
	}
</script>
<style type="text/css">
	#anteprima {
		padding: 4px;
		width: 392px;
		height: 292px;
		border: 1px #cccccc solid;
		float: left;
		margin-right: 5px;
		overflow: auto;
	}

	#messaggio {
		width: 400px;
		height: 300px;
		border: 1px #cccccc solid;
	}

	.intLink {
		cursor: pointer;
		text-decoration: underline;
		color: #0000ff;
	}
</style>
</head>

<body>

<form name="myForm">


[<span class="intLink" onclick="insertMetachars('&lt;strong&gt;','&lt;\/strong&gt;');">Bold</span> | <span class="intLink" onclick="insertMetachars('&lt;em&gt;','&lt;\/em&gt;');">Italic</span> | <span class="intLink" onclick="var newURL=prompt('Enter the full URL for the link');if(newURL){insertMetachars('&lt;a href=\u0022'+newURL+'\u0022&gt;','&lt;\/a&gt;');}else{document.myForm.myTxtArea.focus();}">URL</span> | <span class="intLink" onclick="insertMetachars('\n&lt;code&gt;\n','\n&lt;\/code&gt;\n');">code</span> | <span class="intLink" onclick="insertMetachars(' :-)');">smile</span> | etc. etc.]</p>
<div id="anteprima">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</div>


<textarea id="messaggio" name="myTxtArea" onkeyup="makePreview();" onchange="makePreview();">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut facilisis, arcu vitae adipiscing placerat, nisl lectus accumsan nisi, vitae iaculis sem neque vel lectus. Praesent tristique commodo lorem quis fringilla. Sed ac tellus eros. Sed consectetur eleifend felis vitae luctus. Praesent sagittis, est eget bibendum tincidunt, ligula diam tincidunt augue, a fermentum odio velit eget mi. Phasellus mattis, elit id fringilla semper, orci magna cursus ligula, non venenatis lacus augue sit amet dui. Pellentesque lacinia odio id nisi pulvinar commodo tempus at odio. Ut consectetur eros porttitor nunc mollis ultrices. Aenean porttitor, purus sollicitudin viverra auctor, neque erat blandit sapien, sit amet tincidunt massa mi ac nibh. Proin nibh sem, bibendum ut placerat nec, cursus et lacus. Phasellus vel augue turpis. Nunc eu mauris eu leo blandit mollis interdum eget lorem.</textarea></p>
</form>

</body>
</html>

C'è solo una cosa... teoricamente la textbox non volevo farla vedere..nel senso che vorrei che si vedesse a schermo solo il typing nel div. Non saprei come fare...è possibile "spostare" la textbox in un'altra pagina web che per interagisce con questa qui? mi spiego, ho due schermi... in uno avrò il mio "backend" in cui scriverò il testo con la textbox mentre nell'altro schermo mi trovo il"frontend" (quello che vedranno tutti) in cui ci sarà la pagina del div che voglio far visualizzare..c'è un modo per far tutto ciò?

**punticci** · 13-07-2012, 13:48

Oppure mi basta un ajax che per lo meno scrivo quello che voglio e non mi fa il refresh della pagina..avete qualche scriptino?

Discussione: Realizzazione testo input visualizzato su schermo

Strumenti discussione

Ricerca discussione

Visualizza

Realizzazione testo input visualizzato su schermo

Permessi di invio