Nwlapcug.com


Come inserire un carattere nella posizione del cursore in JavaScript

Come inserire un carattere nella posizione del cursore in JavaScript


JavaScript è un linguaggio di scripting lato client che può essere utilizzato dagli sviluppatori Web per eseguire una serie di operazioni di interfaccia utente dinamica. Manipolazioni di interfaccia utente possono variare da semplici risposte (ad esempio finestre di avviso) a complesse interazioni. Ad esempio, molte pagine Web presentano testo o campi di input in cui gli utenti digitano informazioni. Utilizzando JavaScript, gli sviluppatori Web possono modificare questo testo nella posizione del cursore, pulsanti che inserire le stringhe di caratteri (ad esempio un indirizzo di posta elettronica), evidenziare il testo o copiare testo da utilizzare altrove nel programma di codifica.

Istruzioni

1

Aprire un editor di testo e creare un nuovo file denominato cursorInsert.html. Aggiungere alcuni tag HTML al file che compongono una pagina Web di base. Includono questi tag < html >, < head >, < / head >, < body >, < / body > e < / html >.

< html >

< testa >< / testa >

< corpo >< / corpo >

< / html >

2

Aggiungere un tag di apertura < script > e una stretta < / script > tag per sezione < head > di cursorInsert.html. Assegnare il tag < script > l'attributo di tipo testo/javascript. Questo attributo indica che qualsiasi testo inserito tra i tag < script > di chiusura e di apertura è codice JavaScript.

< html >

< head >

< script type = "text/javascript" >

< / script >

< / head >

< corpo >< / corpo >

< / html >

3

Creare una funzione denominata insertAtCursor tra l'Apri e Chiudi < script > Tag. La funzione insertAtCursor accetta due argomenti di valore variabile: textArea e testo. La variabile di textArea indica la funzione di insertAtCursor l'identità del campo di testo che sarà modificato, e la variabile di testo è il carattere che verrà inserito nella posizione del cursore all'interno della textArea. Utilizzare una parentesi graffa aperta ({) e una parentesi graffa di chiusura (}) per tenere il posto per il codice della funzione.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

4

Aggiungere un'istruzione if... altrimenti se istruzione condizionale tra della insertAtCursor funzione apre e chiusura le parentesi graffe. La condizione che il codice corrispondente è il corretto utilizzo del metodo setSelectionRange riferendosi al campo textArea. Aggiungere un'aperta e una parentesi graffa di chiusura dopo il se... altro se dichiarazione per indicare il codice da eseguire se la condizione è true.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

Se (textArea.setSelectionRange) {}

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

5

Aggiungere codice tra l'apertura dell'istruzione condizionale e chiudere le parentesi graffe che inserisce il testo memorizzato nella variabile testo presso il cursore posizionato nella textArea. Utilizzare un comando di substring () di JavaScript per creare la stringa da utilizzare per aggiornare il testo. Questa stringa utilizza la prima parte della stringa (fino il cursore), aggiunge il valore memorizzato nella variabile di testo, aggiunge i valori tra le posizioni iniziale e finale di cursore e aggiunge tutti i valori memorizzati dopo il cursore.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

Se (textArea.setSelectionRange) {

textArea.value = testo + textArea.value.substring(0,textArea.selectionStart) + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

}

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

6

Aggiungere l'altro se condizionale codice dopo il se... altrimenti se istruzione condizionale chiusura la parentesi graffa. La condizione che il codice corrispondente è l'esistenza degli oggetti Document e document.selection.createRange. Aggiungere un'aperta e una parentesi graffa di chiusura dopo l'altro se istruzione per indicare dove deve essere inserito il codice condizionale. Questo codice fornisce il supporto per tutti i browser che non supportano il metodo setSelectionRange.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

Se (textArea.setSelectionRange) {

textArea.value = testo + textArea.value.substring(0,textArea.selectionStart) + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

} else if (Document. Selection & & document.selection.createRange) {

}

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

7

Aggiungere il codice tra l'altro se di istruzione condizionale apre e chiusura le parentesi graffe. Il codice imposta lo stato attivo al campo di testo textArea, utilizza l'oggetto document.selection.createRange() per recuperare il testo nel campo textArea e imposta il campo di testo il valore di testo accodato al valore di range.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

Se (textArea.setSelectionRange) {

textArea.value = testo + textArea.value.substring(0,textArea.selectionStart) + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

} else if (Document. Selection & & document.selection.createRange) {

textArea.focus();

Fascia di var = document.selection.createRange();

Range. text = testo + Range. Text;

}

}

< / script >

< / head >

< corpo >< / corpo >

< / html >

8

Aggiungere un tag HTML < forma > tra l'Apri e Chiudi < corpo > Tag. Inoltre, aggiungere un tag < input > con gli attributi seguenti: type = "button", valore = "Clicca qui" e un insertAtCursor(this.form.textArea,'hello') di evento OnClick (). Aggiungere un tag < textarea > con gli attributi seguenti: righe = "7", cols = "30" e il nome = "textArea". Chiudere il tag < textarea > ed il tag < form >.

< html >

< head >

< script type = "text/javascript" >

Function insertAtCursor(textArea,text) () {

Se (textArea.setSelectionRange) {

textArea.value = testo + textArea.value.substring(0,textArea.selectionStart) + textArea.value.substring(textArea.selectionStart,textArea.selectionEnd) + textArea.value.substring(textArea.selectionEnd,textArea.value.length);

} else if (Document. Selection & & document.selection.createRange) {

textArea.focus();

Fascia di var = document.selection.createRange();

Range. text = testo + Range. Text;

}

}

< / script >

< / head >

< corpo >

< forma >

< input type = "button" valore = "Clicca qui" onclick="insertAtCursor(this.form.textArea,'hello')" >

< textarea righe = "7" cols = "30" nome = "textArea" >< / textarea >

< / form >

< / body >

< / html >

9

CursorInsert.html aperto in un browser Web. Fare clic sul pulsante "Clicca qui" per inserire il testo "hello" nella posizione del cursore. Aggiungere del testo al campo di input e verificare che facendo clic sul pulsante "Clicca qui" inserisce il testo in corrispondenza del cursore.

Consigli & Avvertenze

  • Inserimento di testo in corrispondenza del cursore è utile quando si aggiungono caratteri internazionali, ad esempio gli accenti, in posizioni specifiche in stringhe di testo.
  • Il metodo substring () di JavaScript può essere utilizzato per estrarre caratteri specifici da stringhe.
  • Oggetto selection può essere utilizzato per evidenziare parti specifiche del testo per utilizzare altrove nell'interfaccia utente.
  • I termini "accento circonflesso" e "spostamento dell'accento circonflesso" a volte sono usati per riferirsi a un "cursore" o "punto di inserimento del cursore."
  • Alcuni browser non forniscono supporto per l'oggetto Document, nonché il metodo setSelectionRange. In questi casi, prendere in considerazione l'utente con le istruzioni per fare un inserto di testo manuale di messaggistica.