PricingLoginStart free
React Native Academy · Lektion

Grundlæggende TextInput og tastaturtyper

Render en TextInput, bind den til state med onChangeText, konfigurér tastaturtypen til e-mail- eller numerisk input, og håndtér hændelsen for Retur-tasten.

Lektion 1 af 413 trin

Grundlæggende TextInput og tastaturtyper er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

TextInput-komponenten

TextInput er React Native-komponenten til at modtage tastaturinput fra brugere. Den gengives som et indbygget tekstfelt på både iOS og Android og giver brugerne platformens naturlige skriveoplevelse med blandt andet autokorrektion, forudsigende tekst og systemets tastaturgenveje. Importér den fra react-native, og brug den til alt input, der kræver et tastatur: søgefelter, loginformularer, indstillingsfelter og felter til chatbeskeder. Uden typografi har TextInput ingen synlig kant på iOS — anvend altid typografi, så feltet er synligt for brugerne.

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 sammenlignet med onChange

Callbacken onChangeText er den mest almindelige måde at reagere på tekstinput på. Den modtager den nye tekststreng direkte som argument, så den er nem at sende videre til en setter fra useState: onChangeText={setText}. Callbacken onChange på et lavere niveau modtager et komplet hændelsesobjekt (event.nativeEvent.text) — nyttigt, når du også har brug for andre metadata om hændelsen, f.eks. markørens placering. Til de fleste formål er onChangeText enklere og det foretrukne valg. Brug kun onChange, når du har brug for oplysningerne fra den indbyggede hændelse.

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 til forskellige input

Proppen keyboardType styrer, hvilken tastaturvariant operativsystemet viser. Til numerisk input viser 'numeric' et numerisk tastatur. Til e-mailadresser indeholder 'email-address' tasterne @ og . tydeligt. 'phone-pad' viser telefonens opkaldslayout. 'decimal-pad' minder om numeric, men indeholder også et decimaltegn. 'url' viser genveje til / og .com. Den korrekte tastaturtype forbedrer brugervenligheden — den reducerer antallet af tastetryk, der kræves for at indtaste data, og forhindrer brugere i at 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 tekstindtastning til adgangskoder

For adgangskodefelter skal du angive secureTextEntry={true} for at skjule de indtastede tegn med prikker. Det er vigtigt for alle felter, der indeholder følsomme data — adgangskoder, pinkoder og sikkerhedskoder. Du kan tilføje en vis/skjul-adgangskodefunktion ved at administrere en boolesk showPassword-værdi i tilstanden og skifte secureTextEntry. Angiv også autoCapitalize='none' og autoCorrect={false} på adgangskodefelter — du ønsker ikke, at autokorrektion eller store bogstaver ændrer brugerens adgangskode, mens den indtastes.

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 styrer, hvornår operativsystemet skriver det første bogstav med stort. Værdierne er: 'none' (skriv aldrig med stort), 'sentences' (første bogstav i hver sætning, standard), 'words' (første bogstav i hvert ord) og 'characters' (alle tegn). Brug 'none' til brugernavne, e-mailadresser og adgangskoder. Brug 'words' til navnefelter. autoCorrect={false} deaktiverer autokorrektion helt, hvilket er vigtigt for brugernavne, tekniske termer og alle felter, hvor brugeren ved, hvad vedkommende skriver.

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

Proppen returnKeyType ændrer etiketten på tastaturets Retur-tast: 'done', 'go', 'next', 'search' og 'send'. Brug 'next' for at angive, at et tryk på Retur flytter fokus til det næste felt. Callbacken onSubmitEditing udløses, når brugeren trykker på Retur-tasten. Kombinér returnKeyType='next' med onSubmitEditing for programmatisk at sætte fokus på den næste TextInput ved hjælp af en ref — det skaber en jævn, fanelignende navigation mellem formularfelter, som brugerne forventer på mobilen.

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

Til tekst over flere linjer, f.eks. en biografi, besked eller kommentar, skal du tilføje proppen multiline. TextInput udvides, når brugeren skriver nye linjer, og understøtter linjeskiftstegn. Brug numberOfLines på Android til at angive den indledende højde (iOS tilpasser automatisk størrelsen). Typografien textAlignVertical: 'top' (kun Android) forhindrer, at teksten starter lodret midt i inputfeltet. På iOS vokser inputfelter med flere linjer automatisk, så de passer til indholdet, når der ikke er angivet en fast højde. Kombiner maxLength med visning af en tegntæller i felter til skrivning af beskeder.

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, sløring og onFocus-/onBlur-hændelser

TextInput udløser onFocus, når brugeren trykker i feltet (tastaturet vises), og onBlur, når brugeren trykker et andet sted (tastaturet skjules). Brug disse hændelser til at vise eller skjule hjælpetekst, ændre kantfarven for at angive den aktive tilstand eller udløse validering af feltet. Et almindeligt mønster er kun at validere et felt efter at brugeren har forladt det (ved sløring), ikke mens brugeren stadig skriver — sådan undgår du at vise fejlmeddelelser, før brugeren er færdig med at skrive. Registrer hvilket felt der har fokus, med en tilstandsvariabel, hvis du skal formatere flere inputfelter forskelligt afhængigt af 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' },
});

Skjul tastaturet

På mobilen skjules tastaturet ikke automatisk, når brugeren trykker uden for et TextInput. Brug Keyboard.dismiss() fra react-native til at skjule det programmatisk. Pak indholdet på skærmen ind i en TouchableWithoutFeedback, der kalder Keyboard.dismiss() ved tryk, så tastaturet skjules, når brugeren trykker et sted uden for det. Du kan også bruge proppen keyboardDismissMode på ScrollView: 'on-drag' skjuler tastaturet, når brugeren begynder at rulle, hvilket giver en behagelig mobilbrugeroplevelse.

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, dækker det den nederste del af skærmen og kan skjule tekstinput i formularer. Pak skærmen ind i KeyboardAvoidingView for automatisk at skubbe indholdet op, når tastaturet åbnes. Angiv behavior='padding' på iOS og behavior='height' på Android (brug Platform.OS til at vælge den rigtige værdi). Kombiner den med keyboardVerticalOffset for at tage højde for højden på sidehovedet. På skærme med mange inputfelter giver det den bedste oplevelse at kombinere KeyboardAvoidingView med en ScrollView indeni.

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 },
});

Inputmaskering af formaterede værdier

Nogle inputfelter skal vise formateret indhold, mens brugeren skriver — kreditkortnumre med mellemrum for hvert fjerde ciffer, telefonnumre med bindestreger eller datoer i formatet DD/MM/YYYY. Implementer dette i hændelseshåndteringen for onChangeText: fjern formateringstegn fra det rå input, anvend formatet, og gem den formaterede tekst som tilstand. TextInput viser den formaterede værdi (fra tilstanden), men du gemmer cifrene separat, så de kan sendes. Biblioteker som react-native-mask-input leverer et TextInput med maske, som kan indsættes direkte og automatisk håndterer almindelige 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 }}
    />
  );
}

Hurtig test

Test din forståelse af begreberne inden for React Native-mobiludvikling fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion har du lært, at keyboardType viser det passende tastatur til datatypen, at returnKeyType med refs muliggør navigation mellem formularfelter som med tabulatortasten, og at KeyboardAvoidingView forhindrer tastaturet i at dække inputfelter nederst på skærmen. Dernæst ser vi på, hvordan du tilføjer trykfeedback med TouchableOpacity og Pressable.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Grundlæggende TextInput og tastaturtyper” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Grundlæggende TextInput og tastaturtyper”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Grundlæggende TextInput og tastaturtyper”?

Render en TextInput, bind den til state med onChangeText, konfigurér tastaturtypen til e-mail- eller numerisk input, og håndtér hændelsen for Retur-tasten. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Grundlæggende TextInput og tastaturtyper”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Grundlæggende TextInput og tastaturtyper
  2. Trykhåndtering med TouchableOpacity og Pressable
  3. Til/fra-knapper, switches og afkrydsningsfelter
  4. Opbygning af en enkel loginformular
← Tilbage til React Native Academy