PricingLoginStart free
React Native Academy · Oppitunti

TextInputin perusteet ja näppäimistötyypit

Renderöikää TextInput, sitokaa se tilaan onChangeTextillä, määrittäkää sähköpostiosoitteille tai numeeriselle syötteelle sopiva näppäimistötyyppi ja käsitelkää Return-näppäimen tapahtuma.

Oppitunti 1/413 vaihetta

TextInputin perusteet ja näppäimistötyypit on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.

TextInput-komponentti

TextInput on React Nativen komponentti, jolla käyttäjiltä vastaanotetaan näppäimistösyötettä. Se näytetään alkuperäisenä tekstikenttänä sekä iOS:ssä että Androidissa, joten käyttäjät saavat alustan oman kirjoituskokemuksen, kuten automaattisen korjauksen, ennakoivan tekstinsyötön ja järjestelmän näppäimistön pikanäppäimet. Tuokaa se moduulista react-native ja käyttäkää sitä kaikissa näppäimistöä vaativissa syötteissä: hakukentissä, kirjautumislomakkeissa, asetuskentissä ja chat-viestien kirjoituskentissä. Ilman tyylejä TextInputilla ei ole iOS:ssä näkyvää reunusta — tyylitelkää se aina, jotta käyttäjät näkevät sen.

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 verrattuna onChangeen

onChangeText-takaisinkutsu on yleisin tapa reagoida tekstisyötteeseen. Se vastaanottaa uuden tekstimerkkijonon suoraan argumenttinaan, joten sen voi helposti välittää useState-tilan asettajalle: onChangeText={setText}. Alemman tason onChange-takaisinkutsu vastaanottaa kokonaisen tapahtumaolion (event.nativeEvent.text) — tämä on hyödyllistä, kun tarvitsette myös muita tapahtuman metatietoja, kuten kohdistimen sijainnin. Useimmissa tapauksissa onChangeText on yksinkertaisempi ja suositeltavampi. Käyttäkää onChange-takaisinkutsua vain, kun tarvitsette natiivin tapahtuman tiedot.

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

Eri syötteille sopivat näppäimistötyypit

keyboardType-proppi määrittää, minkä näppäimistömuunnelman käyttöjärjestelmä näyttää. Numeerisessa syötteessä 'numeric' näyttää numeronäppäimistön. Sähköpostiosoitteita varten 'email-address' tuo @- ja .-näppäimet selkeästi esiin. 'phone-pad' näyttää puhelimen numeronäppäimistön. 'decimal-pad' vastaa numeric-tyyppiä, mutta sisältää myös desimaalipisteen. 'url' näyttää /- ja .com-pikavalinnat. Oikean näppäimistötyypin käyttäminen parantaa käytettävyyttä: se vähentää tietojen syöttämiseen tarvittavien näppäinpainallusten määrää ja estää käyttäjiä kirjoittamasta virheellisiä merkkejä.

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

Salasanojen suojattu tekstinsyöttö

Salasanakentissä piilottakaa kirjoitetut merkit pisteillä määrittämällä secureTextEntry={true}. Tämä on välttämätöntä kaikissa arkaluonteisia tietoja sisältävissä kentissä, kuten salasanoissa, PIN-koodeissa ja turvakoodeissa. Voitte lisätä salasanan näyttämiseen ja piilottamiseen tarkoitetun painikkeen hallitsemalla tilassa showPassword-totuusarvoa ja vaihtamalla secureTextEntry-arvoa. Asettakaa salasanakentille myös autoCapitalize='none' ja autoCorrect={false} — automaattinen korjaus tai isot kirjaimet eivät saa muuttaa käyttäjän salasanaa kirjoittamisen aikana.

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 ja autoCorrect

autoCapitalize määrittää, milloin käyttöjärjestelmä muuttaa ensimmäisen kirjaimen isoksi. Arvot ovat: 'none' (ei koskaan isoa alkukirjainta), 'sentences' (jokaisen virkkeen ensimmäinen kirjain, oletus), 'words' (jokaisen sanan ensimmäinen kirjain) ja 'characters' (jokainen merkki). Käyttäkää arvoa 'none' käyttäjänimissä, sähköpostiosoitteissa ja salasanoissa. Käyttäkää arvoa 'words' nimikentissä. autoCorrect={false} poistaa automaattisen korjauksen kokonaan käytöstä, mikä on välttämätöntä käyttäjänimissä, teknisissä termeissä ja kaikissa kentissä, joissa käyttäjä tietää itse, mitä kirjoittaa.

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 ja onSubmitEditing

returnKeyType-proppi muuttaa näppäimistön Return-näppäimen selitettä: 'done', 'go', 'next', 'search', 'send'. Käyttäkää arvoa 'next' ilmaisemaan, että Return-näppäimen painaminen siirtää kohdistuksen seuraavaan kenttään. onSubmitEditing-takaisinkutsu suoritetaan, kun käyttäjä painaa Return-näppäintä. Yhdistämällä returnKeyType='next'-määrityksen ja onSubmitEditing-takaisinkutsun voitte kohdistaa seuraavaan TextInput-komponenttiin ohjelmallisesti ref-viitteen avulla — näin lomakekenttien välille syntyy sujuva, välilehtinavigaatiota muistuttava siirtyminen, jota käyttäjät odottavat mobiililaitteilla.

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

Monirivinen TextInput

Monirivistä tekstiä, kuten esittelytekstiä, viestiä tai kommenttia varten, lisää multiline-prop. TextInput laajenee käyttäjän kirjoittaessa uusia rivejä ja tukee rivinvaihtomerkkejä. Aseta Androidilla alkuperäinen korkeus käyttämällä numberOfLines-propia (iOS määrittää koon automaattisesti). textAlignVertical: 'top' -tyyli (vain Androidilla) estää tekstin alkamisen syöttökentän pystysuunnassa keskeltä. iOS:llä moniriviset syöttökentät kasvavat automaattisesti sisällön mukaan, jos niille ei ole määritetty kiinteää korkeutta. Yhdistä viestien kirjoituskentissä maxLength merkkimäärälaskuriin.

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

Kohdistus, kohdistuksen poistaminen ja onFocus- / onBlur-tapahtumat

TextInput kutsuu onFocus-käsittelijää, kun käyttäjä napauttaa sitä (näppäimistö tulee näkyviin), ja onBlur-käsittelijää, kun käyttäjä napauttaa sen ulkopuolelle (näppäimistö piilotetaan). Näiden avulla voit näyttää tai piilottaa ohjetekstin, vaihtaa reunuksen väriä aktiivisen tilan ilmaisemiseksi tai käynnistää kenttäkohtaisen tarkistuksen. Yleinen käytäntö on tarkistaa kenttä vasta kun käyttäjä on poistunut siitä (kohdistus on poistettu), ei käyttäjän vielä kirjoittaessa – näin virheilmoituksia ei näytetä ennen kuin käyttäjä on saanut kirjoittamisen päätökseen. Seuraa kohdistettua kenttää tilamuuttujan avulla, jos haluat tyylitellä useita syöttökenttiä eri tavoin kohdistuksen perusteella.

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

Näppäimistön piilottaminen

Mobiililaitteilla näppäimistö ei piiloudu automaattisesti, kun käyttäjä napauttaa TextInput-komponentin ulkopuolelle. Piilota näppäimistö ohjelmallisesti käyttämällä react-native-kirjaston Keyboard.dismiss()-metodia. Kääri näytön sisältö TouchableWithoutFeedback-komponenttiin, joka kutsuu painalluksen yhteydessä Keyboard.dismiss()-metodia, jolloin näppäimistön ulkopuolelle napauttaminen piilottaa sen. Vaihtoehtoisesti voit käyttää ScrollView-komponentin keyboardDismissMode-proppia: 'on-drag' piilottaa näppäimistön, kun käyttäjä aloittaa vierittämisen. Tämä on mobiilikäyttöliittymälle luonteva toimintatapa.

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

Kun näppäimistö tulee näkyviin, se peittää näytön alaosan ja voi peittää lomakkeiden tekstikentät. Kääri näyttösi KeyboardAvoidingView-komponenttiin, jotta sisältö siirtyy automaattisesti ylöspäin näppäimistön avautuessa. Aseta iOS:llä behavior='padding' ja Androidilla behavior='height' (valitse oikea arvo Platform.OS-arvon avulla). Ota otsikon korkeus huomioon yhdistämällä tähän keyboardVerticalOffset. Jos näytöllä on paljon syöttökenttiä, saat parhaan käyttökokemuksen yhdistämällä KeyboardAvoidingView-komponenttiin sisäkkäisen ScrollView-komponentin.

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

Muotoiltujen arvojen syöttömaskit

Joidenkin syöttökenttien on näytettävä muotoiltu arvo käyttäjän kirjoittaessa: luottokorttinumerossa välilyönti joka neljännen numeron jälkeen, puhelinnumerossa viivoja tai päivämäärä muodossa DD/MM/YYYY. Toteuta tämä onChangeText-käsittelijässä: poista raaka-arvosta muotoilumerkit, lisää muotoilu ja tallenna muotoiltu merkkijono tilaan. TextInput näyttää tilasta saatavan muotoillun arvon, mutta lähetystä varten tallennat raakadigit erikseen. react-native-mask-input-kirjaston kaltaiset kirjastot tarjoavat suoraan käyttöön otettavan maskatun TextInput-komponentin, joka käsittelee yleiset muodot automaattisesti.

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

Pikatesti

Testaa, miten hyvin ymmärrät tämän oppitunnin React Native Mobile Development -käsitteet.

Vastaa interaktiivisessa oppitunnissa

Oppitunnin kertaus

Tässä oppitunnissa opit, että keyboardType näyttää tietotyypille sopivan näppäimistön, returnKeyType yhdessä ref-viitteiden kanssa mahdollistaa lomakekenttien välisen sarkainta vastaavan siirtymisen ja KeyboardAvoidingView estää näppäimistöä peittämästä näytön alaosan syöttökenttiä. Seuraavaksi tutustumme napautepalautteen lisäämiseen TouchableOpacity- ja Pressable-komponenteilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
30
Oppitunnit
120
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”TextInputin perusteet ja näppäimistötyypit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “TextInputin perusteet ja näppäimistötyypit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”TextInputin perusteet ja näppäimistötyypit”?

Renderöikää TextInput, sitokaa se tilaan onChangeTextillä, määrittäkää sähköpostiosoitteille tai numeeriselle syötteelle sopiva näppäimistötyyppi ja käsitelkää Return-näppäimen tapahtuma. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.

Kuinka kauan ”TextInputin perusteet ja näppäimistötyypit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?

Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. TextInputin perusteet ja näppäimistötyypit
  2. Napautuskäsittelijät TouchableOpacitylla ja Pressablella
  3. Vaihtokytkimet, kytkimet ja valintaruudut
  4. Yksinkertaisen kirjautumislomakkeen rakentaminen
← Takaisin: React Native Academy