Grunnleggende om TextInput og tastaturtyper
Gjengi en TextInput, koble den til tilstanden med onChangeText, konfigurer tastaturtypen for e-post eller numeriske inndata, og håndter hendelsen for returtasten.
Grunnleggende om TextInput og tastaturtyper er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
TextInput-komponenten
TextInput er React Native-komponenten for å hente inn tastaturinndata fra brukere. Den gjengis som et innebygd tekstfelt på både iOS og Android, og gir brukerne plattformens vanlige skriveopplevelse, inkludert autokorrigering, forslagstekst og hurtigtaster på systemnivå. Importer den fra react-native, og bruk den for all inndata som krever tastatur: søkefelt, innloggingsskjemaer, innstillingsfelt og felt for å skrive chatmeldinger. Uten styling har TextInput ingen synlig kantlinje i iOS – bruk alltid styling for å gjøre feltet synlig for brukerne.
import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';
export default function BasicInput() {
const [text, setText] = useState('');
return (
<View style={{ padding: 16 }}>
<TextInput
value={text}
onChangeText={setText}
placeholder='Type something here...'
style={styles.input}
/>
</View>
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 12,
fontSize: 16,
backgroundColor: '#fff',
},
});onChangeText kontra onChange
onChangeText-tilbakeringingen er den vanligste måten å reagere på tekstinndata på. Den mottar den nye tekststrengen direkte som argument, noe som gjør det enkelt å sende den til en useState-setter: onChangeText={setText}. Tilbakeringingen på lavere nivå, onChange, mottar et fullstendig hendelsesobjekt (event.nativeEvent.text) – nyttig når De også trenger andre metadata fra hendelsen, for eksempel markørposisjon. I de fleste tilfeller er onChangeText enklere og foretrukket. Bruk bare onChange når De trenger detaljene fra den innebygde hendelsen.
import { TextInput } from 'react-native';
import { useState } from 'react';
function TextInputExample() {
const [text, setText] = useState('');
return (
<>
{/* Simple: receives the string directly */}
<TextInput
onChangeText={(newText) => setText(newText)}
// shorthand equivalent:
// onChangeText={setText}
/>
{/* Advanced: receives the full event object */}
<TextInput
onChange={(event) => {
console.log('text:', event.nativeEvent.text);
console.log('selection:', event.nativeEvent.selection);
}}
/>
</>
);
}Tastaturtyper for ulike inndata
Propen keyboardType bestemmer hvilken tastaturvariant operativsystemet viser. For numeriske inndata viser 'numeric' et talltastatur. For e-postadresser inneholder 'email-address' tastene @ og . tydelig. 'phone-pad' viser oppsettet til en telefontastatur. 'decimal-pad' ligner på numeric, men inneholder et desimalskilletegn. 'url' viser snarveier for / og .com. Riktig tastaturtype gir bedre brukervennlighet – det reduserer antallet tastetrykk som trengs for å skrive inn data, og hindrer brukere i å skrive ugyldige tegn.
import { View, TextInput, Text, StyleSheet } from 'react-native';
export default function KeyboardTypesDemo() {
return (
<View style={{ padding: 16, gap: 12 }}>
<TextInput style={styles.input} keyboardType='default' placeholder='Default text' />
<TextInput style={styles.input} keyboardType='email-address' placeholder='email@example.com' />
<TextInput style={styles.input} keyboardType='numeric' placeholder='Enter a number' />
<TextInput style={styles.input} keyboardType='phone-pad' placeholder='Phone number' />
<TextInput style={styles.input} keyboardType='decimal-pad' placeholder='Price (0.00)' />
<TextInput style={styles.input} keyboardType='url' placeholder='https://...' />
</View>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16, backgroundColor: '#fff' },
});Sikker tekstinntasting for passord
For passordfelt setter De secureTextEntry={true} for å skjule de innskrevne tegnene med punkttegn. Dette er nødvendig for alle felt som inneholder sensitive data – passord, PIN-koder og sikkerhetskoder. De kan legge til en vis/skjul-bryter for passord ved å håndtere en boolsk showPassword-verdi i state og veksle mellom verdiene for secureTextEntry. Sett også autoCapitalize='none' og autoCorrect={false} på passordfelt – De vil ikke at autokorrigering eller store bokstaver skal endre brukerens passord mens det skrives inn.
import { TextInput, TouchableOpacity, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';
export default function PasswordInput() {
const [password, setPassword] = useState('');
const [visible, setVisible] = useState(false);
return (
<View style={styles.wrapper}>
<TextInput
value={password}
onChangeText={setPassword}
secureTextEntry={!visible}
autoCapitalize='none'
autoCorrect={false}
placeholder='Password'
style={styles.input}
/>
<TouchableOpacity
style={styles.toggle}
onPress={() => setVisible(v => !v)}
>
<Text style={{ fontSize: 18 }}>{visible ? '🙈' : '👁'}</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({
wrapper: { flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', borderRadius: 10, paddingHorizontal: 14 },
input: { flex: 1, paddingVertical: 12, fontSize: 16 },
toggle: { paddingLeft: 8 },
});autoCapitalize og autoCorrect
autoCapitalize bestemmer når operativsystemet setter den første bokstaven til stor bokstav. Verdier: 'none' (aldri stor bokstav), 'sentences' (første bokstav i hver setning, standard), 'words' (første bokstav i hvert ord), 'characters' (alle tegn). Bruk 'none' for brukernavn, e-postadresser og passord. Bruk 'words' for navnefelt. autoCorrect={false} deaktiverer autokorrigering fullstendig, noe som er nødvendig for brukernavn, tekniske termer og alle felt der brukeren vet hva som skal skrives inn.
import { View, TextInput, StyleSheet } from 'react-native';
export default function FormInputs() {
return (
<View style={{ padding: 16, gap: 12 }}>
{/* Name: capitalize each word, allow autocorrect */}
<TextInput
style={styles.input}
placeholder='Full name'
autoCapitalize='words'
autoCorrect={true}
/>
{/* Username: no caps, no autocorrect */}
<TextInput
style={styles.input}
placeholder='@username'
autoCapitalize='none'
autoCorrect={false}
/>
{/* Email: no caps, no autocorrect */}
<TextInput
style={styles.input}
placeholder='Email address'
keyboardType='email-address'
autoCapitalize='none'
autoCorrect={false}
/>
</View>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});returnKeyType og onSubmitEditing
Propen returnKeyType endrer etiketten på tastaturets Enter-tast: 'done', 'go', 'next', 'search', 'send'. Bruk 'next' for å angi at et trykk på Enter flytter fokuset til neste felt. Tilbakeringingen onSubmitEditing utløses når brukeren trykker på Enter-tasten. Kombiner returnKeyType='next' med onSubmitEditing for å sette fokus programmatisk på neste TextInput ved hjelp av en ref – dette gir en jevn, tabulatorlignende navigering mellom skjemafelt, slik brukere forventer på mobil.
import { View, TextInput, StyleSheet, useRef } from 'react-native';
export default function MultiFieldForm() {
const emailRef = useRef(null);
const passwordRef = useRef(null);
return (
<View style={{ padding: 16, gap: 12 }}>
<TextInput
ref={emailRef}
style={styles.input}
placeholder='Email'
keyboardType='email-address'
returnKeyType='next'
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<TextInput
ref={passwordRef}
style={styles.input}
placeholder='Password'
secureTextEntry
returnKeyType='done'
onSubmitEditing={() => console.log('Form submitted!')}
/>
</View>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});TextInput med flere linjer
For tekst over flere linjer, som en biografi, melding eller kommentar, legger du til multiline-propen. TextInput utvider seg når brukeren skriver inn nye linjer, og støtter linjeskifttegn. Bruk numberOfLines på Android for å angi starthøyden (iOS tilpasser størrelsen automatisk). Stilen textAlignVertical: 'top' (kun Android) hindrer at teksten starter vertikalt midt i inndatafeltet. På iOS utvides inndatafelt med flere linjer automatisk slik at de får plass til innholdet, når det ikke er angitt noen eksplisitt høyde. Kombiner maxLength med en tegnteller for meldingsfelt.
import { TextInput, Text, View, StyleSheet } from 'react-native';
import { useState } from 'react';
export default function BioInput() {
const [bio, setBio] = useState('');
const MAX_LENGTH = 200;
return (
<View style={{ padding: 16 }}>
<TextInput
value={bio}
onChangeText={setBio}
placeholder='Tell us about yourself...'
multiline
numberOfLines={4} // Android: initial height
maxLength={MAX_LENGTH}
style={styles.input}
textAlignVertical='top' // Android: align text to top
/>
<Text style={styles.counter}>
{bio.length}/{MAX_LENGTH}
</Text>
</View>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 12, fontSize: 15, minHeight: 100 },
counter: { textAlign: 'right', color: '#999', fontSize: 12, marginTop: 4 },
});Fokus, blur og onFocus-/onBlur-hendelser
TextInput utløser onFocus når brukeren trykker i feltet (tastaturet vises), og onBlur når brukeren trykker utenfor feltet (tastaturet skjules). Bruk disse til å vise eller skjule hjelpetekst, endre kantfargen for å angi aktiv tilstand eller utløse validering av enkeltfelt. Et vanlig mønster er å validere et felt først etter at brukeren har forlatt det (ved blur), ikke mens brukeren fortsatt skriver – slik unngår du å vise feilmeldinger før brukeren er ferdig med å skrive. Spor hvilket felt som har fokus, med en state-variabel, hvis du trenger å style flere inndatafelt forskjellig basert på fokus.
import { TextInput, View, StyleSheet } from 'react-native';
import { useState } from 'react';
export default function FocusableInput({ placeholder, onBlurValidate }) {
const [focused, setFocused] = useState(false);
const [value, setValue] = useState('');
const [error, setError] = useState('');
function handleBlur() {
setFocused(false);
const err = onBlurValidate ? onBlurValidate(value) : '';
setError(err);
}
return (
<View>
<TextInput
value={value}
onChangeText={setValue}
onFocus={() => setFocused(true)}
onBlur={handleBlur}
placeholder={placeholder}
style={[
styles.input,
focused && styles.focused,
error && styles.error,
]}
/>
</View>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1.5, borderColor: '#ddd', borderRadius: 10, padding: 12, fontSize: 16 },
focused: { borderColor: '#4f86f7', shadowColor: '#4f86f7', shadowOpacity: 0.2, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
error: { borderColor: '#e74c3c' },
});Skjule tastaturet
På mobile enheter skjules ikke tastaturet automatisk når brukeren trykker utenfor et TextInput. Bruk Keyboard.dismiss() fra react-native for å skjule det programmatisk. Pakk innholdet på skjermen i en TouchableWithoutFeedback som kaller Keyboard.dismiss() ved trykk, slik at tastaturet skjules når brukeren trykker hvor som helst utenfor det. Du kan også bruke propen keyboardDismissMode på ScrollView: 'on-drag' skjuler tastaturet når brukeren begynner å rulle, noe som gir en god brukeropplevelse på mobile enheter.
import { TouchableWithoutFeedback, Keyboard, ScrollView, TextInput, StyleSheet, View } from 'react-native';
export default function DismissibleForm() {
return (
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<ScrollView
style={{ flex: 1 }}
keyboardDismissMode='on-drag' // dismiss on scroll
keyboardShouldPersistTaps='handled'
>
<View style={{ padding: 16, gap: 12 }}>
<TextInput style={styles.input} placeholder='Name' />
<TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
<TextInput style={styles.input} placeholder='Message' multiline numberOfLines={4} textAlignVertical='top' />
</View>
</ScrollView>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 },
});KeyboardAvoidingView
Når tastaturet vises, dekker det den nederste delen av skjermen og kan skjule tekstfelt i skjemaer. Pakk inn skjermen i KeyboardAvoidingView for automatisk å flytte innholdet opp når tastaturet åpnes. Angi behavior='padding' på iOS og behavior='height' på Android (bruk Platform.OS for å velge riktig verdi). Kombiner dette med keyboardVerticalOffset for å ta høyde for høyden på toppteksten. På skjermer med mange inndatafelt gir det best brukeropplevelse å kombinere KeyboardAvoidingView med en ScrollView inni.
import { KeyboardAvoidingView, Platform, ScrollView, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native';
export default function LoginScreen() {
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardVerticalOffset={60} // adjust for header height
>
<ScrollView contentContainerStyle={styles.form}>
<TextInput style={styles.input} placeholder='Email' keyboardType='email-address' />
<TextInput style={styles.input} placeholder='Password' secureTextEntry />
<TouchableOpacity style={styles.btn}>
<Text style={styles.btnText}>Log In</Text>
</TouchableOpacity>
</ScrollView>
</KeyboardAvoidingView>
);
}
const styles = StyleSheet.create({
form: { padding: 24, gap: 16, flexGrow: 1, justifyContent: 'center' },
input: { borderWidth: 1, borderColor: '#ccc', borderRadius: 10, padding: 14, fontSize: 16 },
btn: { backgroundColor: '#4f86f7', padding: 16, borderRadius: 10, alignItems: 'center' },
btnText: { color: '#fff', fontWeight: 'bold', fontSize: 16 },
});Maskering av inndata for formaterte verdier
Noen inndatafelt trenger formatert visning mens brukeren skriver – kredittkortnumre med mellomrom for hvert fjerde siffer, telefonnumre med bindestreker eller datoer i formatet DD/MM/YYYY. Implementer dette i onChangeText-behandleren: fjern formateringstegn fra råinndataene, bruk formatet, og lagre den formaterte teksten i state. TextInput viser den formaterte verdien (fra state), mens du lagrer sifrene uten formatering separat for innsending. Biblioteker som react-native-mask-input tilbyr et ferdig maskert TextInput som automatisk håndterer vanlige mønstre.
import { TextInput } from 'react-native';
import { useState } from 'react';
// Manual phone number formatting: (555) 123-4567
export default function PhoneInput({ onPhoneChange }) {
const [display, setDisplay] = useState('');
function formatPhone(raw) {
const digits = raw.replace(/\D/g, '').slice(0, 10); // digits only, max 10
let formatted = digits;
if (digits.length > 6) {
formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
} else if (digits.length > 3) {
formatted = '(' + digits.slice(0,3) + ') ' + digits.slice(3);
} else if (digits.length > 0) {
formatted = '(' + digits;
}
setDisplay(formatted);
onPhoneChange(digits); // pass raw digits to parent
}
return (
<TextInput
value={display}
onChangeText={formatPhone}
keyboardType='phone-pad'
placeholder='(555) 123-4567'
style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, fontSize: 16 }}
/>
);
}Rask sjekk
Test forståelsen din av konseptene innen React Native Mobile Development fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte du at keyboardType viser riktig tastatur for datatypen, at returnKeyType med refs muliggjør tabulatorlignende navigering mellom skjemafelt, og at KeyboardAvoidingView hindrer tastaturet i å dekke til inndatafelt nederst på skjermen. Deretter skal vi se på hvordan du legger til trykktilbakemelding med TouchableOpacity og Pressable.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Grunnleggende om TextInput og tastaturtyper» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Grunnleggende om TextInput og tastaturtyper», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Grunnleggende om TextInput og tastaturtyper»?
Gjengi en TextInput, koble den til tilstanden med onChangeText, konfigurer tastaturtypen for e-post eller numeriske inndata, og håndter hendelsen for returtasten. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Grunnleggende om TextInput og tastaturtyper»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Grunnleggende om TextInput og tastaturtyper
- Trykkbehandlere med TouchableOpacity og Pressable
- Brytere, Switch og avmerkingsbokser
- Bygge et enkelt innloggingsskjema