Hvordan sette inn et tegn ved markøren i Javascript
Javascript er et klient-side skriptspråk som kan brukes av webutviklere til å utføre en rekke dynamiske brukergrensesnitt oppgaver. Brukergrensesnitt manipulasjoner kan være alt fra enkle svar (for eksempel varsler bokser) til komplekse interaksjoner. For eksempel, mange websider har tekst eller input felt der brukerne skriver informasjon. Ved hjelp av Javascript, kan webutviklere manipulere denne teksten ved markøren, koding knapper som setter tegnstrenger (som for eksempel en e-postadresse), utheve tekst eller kopiere tekst til bruk andre steder i programmet.
Bruksanvisning
1 Åpne en teksteditor og opprette en ny fil med navnet cursorInsert.html. Legg noen HTML-koder til filen som utgjør en grunnleggende nettside. Disse kodene inkluderer <html>, <head> </ head> <body> </ body> og </ html>.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Legg en åpen <script> tag og et nært </ script> tag i <head> -delen av cursorInsert.html. Tilordne <script> tag type attributt text / javascript. Dette attributtet angir at enhver tekst plassert mellom åpning og lukking <script> tags er Javascript-kode.
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Lag en funksjon som heter insertAtCursor mellom de åpne og lukke <script> koder. Den insertAtCursor funksjonen tar to variable verdi argumenter: textarea og tekst. Den textarea variabel forteller insertAtCursor fungere identiteten til tekstfeltet som blir manipulert, og teksten variabelen er tegnet som vil bli plassert ved markøren inne textarea. Bruk en åpen klammeparentes ({) og en nær klammeparentes (}) for å holde stedet for funksjonen kode.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Legg en if ... else if betinget utsagn mellom insertAtCursor funksjonens åpne og lukke klammeparentes. Vilkåret om at koden matcher er gyldig bruk av setSelectionRange metoden viser til textarea feltet. Legg en åpen og tett klammeparentes etter hvis ... else if setningen til å oppgi koden til å kjøre hvis betingelsen er sann.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
if (textArea.setSelectionRange) {}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Legg kode mellom betinget statement er åpne og lukke klammeparentes som setter inn tekst lagret i tekstvariabelen ved markøren plassert i tekstfeltet. Bruk en Javascript substring () kommandoen for å lage strengen til å bruke for å oppdatere teksten. Denne strengen bruker den første delen av strengen (opp til markøren), legger verdien som er lagret i tekstvariabel, føyer eventuelle verdier mellom start- og sluttmarkør steder, og føyer til noen verdier som er lagret etter markøren.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + tekst + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
6 Tilsett annet hvis betinget kode etter hvis ... else if betinget utsagn nære curly brace. Vilkåret om at koden matcher er eksistensen av document.selection og document.selection.createRange stedene. Legg en åpen og tett klammeparentes etter annet hvis setningen til å oppgi hvor den betingede koden skal plasseres. Denne koden gir støtte for alle nettlesere som ikke forstår setSelectionRange metoden.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + tekst + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
7 Legg kode mellom annet hvis betinget statement er åpne og lukke klammeparentes. De kodesett fokusere på textarea tekstfeltet, bruker document.selection.createRange () objekt for å hente teksten i tekstfeltet og angir tekstfeltet til teksten verdi legges til range.text verdi.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + tekst + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
textArea.focus ();
Var range = document.selection.createRange ();
range.text = tekst + range.text;
}
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
8 Legg en HTML <form> -taggen mellom de åpne og lukke <body> kodene. I tillegg legger en <input> tag med følgende attributter: type = "button", value = "Klikk her" og en onClick () hendelses insertAtCursor (this.form.textArea, "hallo"). Legg en <textarea> tag med følgende attributter: p = "7", kolonner = "30" og name = "textarea". Lukk <textarea> -taggen og <form> -taggen.
<Html>
<Head>
<Script type = "text / javascript">
funksjon insertAtCursor (textarea, tekst) {
if (textArea.setSelectionRange) {
textArea.value = textArea.value.substring (0, textArea.selectionStart) + tekst + textArea.value.substring (textArea.selectionStart, textArea.selectionEnd) + textArea.value.substring (textArea.selectionEnd, textArea.value.length) ;
} Else if (document.selection && document.selection.createRange) {
textArea.focus ();
Var range = document.selection.createRange ();
range.text = tekst + range.text;
}
}
</ Script>
</ Head>
<Body>
<Form>
<Input type = "button" value = "Klikk her" onclick = "insertAtCursor (this.form.textArea, 'Hei')">
<Textarea rader = "7" kolonner = "30" name = "textarea"> </ textarea>
</ Form>
</ Body>
</ Html>
9 Åpne cursorInsert.html i en nettleser. Klikk på "Klikk her" knappen for å sette inn teksten "hallo" ved markøren. Legg til litt tekst til tekstfeltet og kontrollere at klikke på "Klikk her" -knappen setter teksten ved markøren.
Hint
- Sette teksten der markøren er nyttig når du legger til internasjonale tegn, for eksempel aksenter, på bestemte steder i tekststrenger.
- Javascript substring () metoden kan brukes til å trekke ut bestemte tegn fra strenger.
- Utvalget objektet kan brukes til å fremheve bestemte deler av teksten for bruk annet sted i brukergrensesnittet.
- Begrepene "caret" og "cirkumflekstegnet navigasjon" blir noen ganger brukt for å referere til en "markør" eller "markør innsettingspunktet."
- Noen nettlesere gir ikke støtte for document.selection objekt samt setSelectionRange metoden. I disse tilfellene vurdere meldinger til brukeren med instruksjoner for å gjøre en manuell tekst innsats.