Guida introduttiva: Input e modifica di testo (HTML)
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Nelle app di Windows Store scritte in JavaScript vengono usati diversi elementi per immettere e modificare il testo, oltre a una serie di attributi e proprietà per la formattazione di testo. I principali elementi per l'immissione del testo sono text box, text area, password input box e rich edit box/rich text box. In questa guida introduttiva viene mostrato come usare questi elementi per visualizzare, immettere e modificare il testo.
Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie sulle funzionalità delle app: Interfaccia utente delle app di Windows Store, dall'inizio alla fine
Prerequisiti
Diamo per scontato che tu sia in grado di creare un'app di Windows Store di base scritta in JavaScript con il modello Libreria Windows per JavaScript. Se hai bisogno di aiuto per creare la tua prima app, vedi Creare la prima app di Windows Store con JavaScript.
Partiamo dal presupposto che tu sappia come gestire eventi in un'app di Windows Store in JavaScript. Per sapere qual è il modo migliore per gestire gli eventi, vedi Guida introduttiva: Aggiunta di controlli e gestione degli eventi.
Scegliere un controllo del testo
Nelle app di Windows Store scritte in JavaScript vengono usati quattro elementi principali per l'immissione del testo: text box, text area, password input box e rich edit box/rich text box. L'elemento da usare dipende dallo scenario specifico. Ecco alcuni scenari e gli elementi consigliati.
| Scenario | Elementi consigliati |
|---|---|
Immettere o modificare testo normale, ad esempio in un modulo. |
|
Immettere una password. |
|
Modificare un documento, un articolo o un blog che richiede formattazione, paragrafi, collegamenti ipertestuali o immagini incorporate. |
Nota Sono disponibili anche elementi secondari per l'immissione del testo, che tuttavia esulano dall'ambito di questo argomento. Questi elementi includono email input box, number input box e URL input box.
Casella di testo e area del testo
Puoi usare gli elementi text box e text area per immettere e modificare testo non formattato. Usa text box per una singola riga di testo e text area per più righe di testo. Ecco il codice HTML per un elemento text box semplice.
<input type="text" />
Ecco il codice HTML per un elemento text area semplice.
<textarea></textarea>
Puoi fare in modo che un elemento text box o text area sia di sola lettura impostandone la proprietà readonly su readonly. Puoi ottenere o impostare il testo selezionato in un elemento text area usando le proprietà selectionStart e selectionEnd. Usa l'evento onselect per eseguire un'operazione quando l'utente seleziona il testo.
Ecco un esempio delle proprietà e degli eventi usati. Quando selezioni il testo nel primo controllo text area, il testo selezionato viene visualizzato nel secondo controllo text area, che è di sola lettura. I valori relativi alla lunghezza della selezione e quelli delle proprietà selectionStart sono visualizzati in due elementi label. A questo scopo viene usato l'evento onselect.
<!-- default.html -->
<!-- ... -->
<div><textarea id="textarea" rows="3">The text that is selected in this text area will show up in the read-only text area below.</textarea></div>
<div><textarea id="readonlyTextarea" contenteditable="false"></textarea></div>
<div><label id="selLength"></label></div>
<div><label id="selStart"></label></div>
<!-- ... -->
// default.js
(function () {
// ...
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: ...
} else {
// TODO: ...
}
args.setPromise(WinJS.UI.processAll().done(
function () {
var textArea = document.getElementById("textarea");
textArea.addEventListener("select", onselectTextarea, false);
// ...
}
));
}
};
app.oncheckpoint = function (args) {
// TODO: ...
};
function onselectTextarea() {
var textarea = document.getElementById("textarea");
var readonlyTextarea = document.getElementById("readonlyTextarea");
var selLength = document.getElementById("selLength");
var selStart = document.getElementById("selStart");
readonlyTextarea.value = textarea.value.substring(
textarea.selectionStart,
textarea.selectionEnd);
selLength.innerText = "Selection length is " +
(textarea.selectionEnd -
textarea.selectionStart);
selStart.innerText = "Selection starts at " + textarea.selectionStart;
}
// ...
app.start();
})();
Ecco il risultato di questo codice.
.png "Testo selezionato in una casella di testo.")
Casella di input password
Puoi immettere una sola riga di contenuto (senza ritorni a capo) in un elemento password input box. Per impostazione predefinita, l'utente non può visualizzare il testo immesso; vengono visualizzati solo i caratteri password che rappresentano il testo.
Puoi ottenere il testo che l'utente ha immesso dalla proprietà value, in genere nel gestore dell'evento onchange.
Ecco il codice che mostra un elemento password input box usato. La password immessa dall'utente viene controllata per verificare se contiene il valore letterale "Password" oppure se è più corta o più lunga di 8 caratteri. Se è così, visualizziamo un messaggio per l'utente in un elemento label.
<!-- default.html -->
<!-- ... -->
<div><input id="password" type="password" placeholder="Enter 8 characters"/></div>
<div><label id="status"></label></div>
<!-- ... -->
// default.js
(function () {
// ...
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: ...
} else {
// TODO: ...
}
args.setPromise(WinJS.UI.processAll().done(
function () {
//...
var password = document.getElementById("password");
password.addEventListener("change", onchangePassword, false);
// ...
}
));
}
};
app.oncheckpoint = function (args) {
// TODO: ...
};
// ...
function onchangePassword() {
var password = document.getElementById("password");
var status = document.getElementById("status");
if (password.value == "Password") {
status.innerText = "'Password' is not allowed as a password.";
}
else if (password.value.length != 8) {
status.innerText = "Password must be exactly 8 characters.";
}
else {
status.innerText = "";
}
}
// ...
app.start();
})();
Casella di modifica/di testo in formato RTF
Puoi usare un elemento rich edit box/rich text box per scrivere e modificare documenti RTF che contengono testo formattato, collegamenti ipertestuali e immagini. Puoi fare in modo che un controllo rich edit box/rich text box sia di sola lettura impostando la proprietà contentEditable su false.
Puoi usare proprietà quali innerHTML per ottenere il contenuto di un elemento rich edit box/rich text box.
In questo esempio viene illustrato come caricare e salvare il contenuto HTML in un elemento rich edit box/rich text box.
<!-- default.html -->
<!-- ... -->
<div>
<button id="openFile">Open file</button>
<button id="saveFile">Save file</button>
</div>
<div id="editor" contenteditable="true" />
<!-- ... -->
// default.js
(function () {
// ...
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: ...
} else {
// TODO: ...
}
args.setPromise(WinJS.UI.processAll().done(
function () {
//...
var openFile = document.getElementById("openFile");
openFile.addEventListener("click", onclickOpen, false);
var saveFile = document.getElementById("saveFile");
saveFile.addEventListener("click", onclickSave, false);
// ...
}
));
}
};
app.oncheckpoint = function (args) {
// TODO: ...
};
// ...
function onclickOpen() {
var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
openPicker.fileTypeFilter.replaceAll([".html"]);
openPicker.pickSingleFileAsync().then(
function (file) {
if (file) {
Windows.Storage.FileIO.readTextAsync(file).then(
function (fileContent) {
var editor = document.getElementById("editor");
editor.innerHTML = fileContent;
}
);
}
}
);
}
function onclickSave() {
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation =
Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
savePicker.fileTypeChoices.insert("HTML", [".html"]);
savePicker.suggestedFileName = "Sample HTML Markup";
savePicker.pickSaveFileAsync().then(
function (file) {
if (file) {
var fileContents = document.getElementById("editor").innerHTML;
// Prevent updates to the remote version of the file until
// completeUpdatesAsync is called.
Windows.Storage.CachedFileManager.deferUpdates(file);
Windows.Storage.FileIO.writeTextAsync(file, fileContents).done(
Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done()
);
}
}
);
}
app.start();
})();
Usare la tastiera virtuale
Windows 8 include una tastiera virtuale per l'immissione del testo quando un'app viene eseguita su un dispositivo dotato di touchscreen. La tastiera virtuale compare quando l'utente tocca un elemento di input modificabile, ad esempio text box o password input box, e scompare quando il campo di input non è più attivo. La tastiera virtuale usa la funzionalità di accessibilità per determinare quando comparire e quando scomparire. Il layout della tastiera virtuale può cambiare a seconda del tipo di elemento di input modificabile. Nel caso di un elemento email input box, ad esempio, sulla tastiera virtuale apparirà il tasto @.
Riepilogo e passaggi successivi
Hai imparato a creare elementi text box, text area, password input box e rich edit box/rich text box per visualizzare e modificare testo nella tua app.
Per ulteriori esempi di codice che utilizzano questi controlli, vedi Esempi di controlli essenziali HTML.