[RN/Short] React Native TextInput 입력 시 최초 키보드 타입 지정 방법: 대문자, 소문자, 숫자

해당 글에서는 react-native 환경에서 TextInput으로 텍스트를 입력할 때 최초 키보드의 타입을 지정하는 방법에 대해 알아봅니다.

 

1) TextInput 입력 시 최초 키보드 타입 지정(대문자, 소문자) : autoCapitalize

---

 

💡TextInput 입력 시 최초 키보드 타입 지정(대문자, 소문자) : autoCapitalize

- 사용자의 편의성을 위해서 대문자만을 입력을 받는 경우에 최초 키보드가 띄어질 때, 대문자 패드로 출력이 되면 편리하기에 이에 대한 적용을 수행합니다.
- 이를 해결하기 위해 autoCapitalize 속성을 활용합니다.

TextInput · React Native

 

1. TextInput의 autoCapitalize 속성의 속성 값

---

속성 값	설명
none	모든 문자를 소문자로 시작
sentences	각 문장의 첫 글자를 대문자로 시작 (기본값)
words	각 단어의 첫 글자를 대문자로 시작
characters	모든 문자를 대문자로 시작

TextInput · React Native

 
 
 

2. 기본 속성 확인

---

💡기본 속성 확인

- 아래에는 TextInput 태그 내에 autoCapitalize 속성값을 지정하지 않은 경우입니다.
- default 값으로 sentences가 적용되어 있기에 최초 키보드는 대문자를 입력받도록 되어 있고, 하나의 문자를 입력하면 소문자 키보드로 변경되고 있습니다.

 
 
 

3. 대문자만 입력받도록 하는 키보드 설정 autoCapitalize = "characters"

---

💡대문자만 입력받도록 하는 키보드 설정 autoCapitalize = "characters"

- TextInput 내에 autoCapitalize="characters" 속성 값을 적용함에 따라 대문자로 입력받도록 구성이 되었습니다.
- 물론, 입력 시에 대문자에서 다시 소문자로 변경 역시 가능합니다.

import React, { useEffect } from "react"
import { Keyboard, Text, TextInput, TouchableWithoutFeedback, View } from "react-native"
const TestScreen = ({ navigation, route }) => {
    return (
        <View>
            <View style={{
                width: 100,
                height: 100,
                marginLeft: 30,
                marginTop: 20,
                flexDirection: "column"
            }}>
                <View style={{ flexDirection: "row" }}>
                    <Text>텍스트를 입력해주세요 : </Text>
                    <TextInput
                        style={{ borderWidth: 1, width: 200 }}
                        autoCapitalize="characters"
                    />
                </View>
            </View>
        </View>
    )

}
export default TestScreen

 
 
 

4. 한글 키보드를 시작으로 띄울 수는 없을까?

---

💡한글 키보드를 시작으로 띄울 수는 없을까?

- 결론적으로는 내장된 기능에서는 불가능합니다. 직접적으로 한국어 키보드를 시작으로 통제가 불 가능 하다고 합니다.
- 대부분이 마지막에 사용했던 키보드를 가져오기에 마지막 TextInput에서 한국어를 사용한 키보드라면 다음 TextInput을 여는 경우 최초 한국어 키보드가 띄어질 수 있습니다.

 

2) +참고) TextInput keyboardType 속성

---

💡 +참고) TextInput keyboardType 속성

- 추가적으로 입력되는 키보드 타입을 통제할 수 있기에, 각각 속성을 적용하여 키보드 시작타입을 적용할 수 있습니다.

KeyboardType 속성 값	설명	플랫폼
default	기본 키보드	모든 플랫폼
number-pad	숫자만 입력 가능한 키패드	모든 플랫폼
decimal-pad	소수점 입력이 가능한 숫자 키패드	모든 플랫폼
numeric	숫자 입력 키보드	모든 플랫폼
email-address	이메일 주소 입력에 최적화된 키보드	모든 플랫폼
phone-pad	전화번호 입력용 키보드	모든 플랫폼
url	URL 입력에 최적화된 키보드	모든 플랫폼
ascii-capable	ASCII 문자 입력이 가능한 키보드	iOS
numbers-and-punctuation	숫자와 구두점 입력 키보드	iOS
name-phone-pad	이름과 전화번호 입력에 적합한 키보드	iOS
twitter	트위터 입력에 최적화된 키보드	iOS
web-search	웹 검색에 최적화된 키보드	iOS
visible-password	입력한 비밀번호가 보이는 키보드	Android

 

TextInput · React Native

 

1. 사용 예시 -1 : number-pad

---

💡사용 예시 -1 : number-pad

- 아래와 같이 시작을 숫자 패드로 시작할 수 있습니다.

 
 
 

2. 사용 예시 -2 : email-address

---

💡사용 예시 -2 : email-address

- 아래와 같이 이메일 주소를 적기에 편리한 패드로 출력이 되고 있습니다.

 
 
 
 
 
오늘도 감사합니다. 😀