안드로이드/Android 의 (Compose TextField) - 입력 제한 설정하기 (maxLength)

Android Compose에서 TextField의 입력 제한을 설정하는 방법을 알아보겠습니다.

TextField의 입력 제한을 설정하려면 TextField() 컴포지션의 maxLength 속성을 사용하면 됩니다. maxLength 속성은 TextField에 입력할 수 있는 최대 문자 수를 나타냅니다.

예를 들어, 다음과 같이 TextField() 컴포지션의 maxLength 속성을 사용하여 입력 제한을 설정할 수 있습니다.

val inputValue = remember { mutableStateOf("") }
TextField(
    value = inputValue.value,
    onValueChange = { 
        if (inputValue.value.length > 10) {
            // 입력 제한을 초과하면 TextField의 값을 초과한 부분을 제거합니다.
            inputValue.value = it.take(10)
        } else {
            inputValue.value = it
        }
    },
    label = {
        Text(text = "입력 값")
    },
    placeholder = {
        Text(text = "1자 이상 입력")
    },
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
)

 

위와 같이 구현해도 별 문제 없겠지만, 일반적으로 플랫폼을 개발하다보면 입력값 별로 maxLength 가 정해진 경우가 대부분입니다.

 

따라서 조금 더 이쁘게 구현하고자 한다면 다음과 같이 구현 해볼 수 있습니다.

enum class InputTextValueEnum(val minLength: Int, val maxLength: Int) {
    EMAIL(minLength = 8, maxLength = 100),
    PHONE_NUMBER(minLength = 8, maxLength = 11),
    PASSWORD(minLength = 6, maxLength = 6),
    ETC(minLength = 0, maxLength = 50),
}

 

val inputValue = remember { mutableStateOf("") }
TextField(
    value = inputValue.value,
    onValueChange = {
        if (inputValue.value.length > InputTextValueEnum.ETC.maxLength) {
            // 입력 제한을 초과하면 TextField의 값을 초과한 부분을 제거합니다.
            inputValue.value = it.take(InputTextValueEnum.ETC.maxLength)
        } else {
            inputValue.value = it
        }
    },
    label = {
        Text(text = "입력 값")
    },
    placeholder = {
        Text(text = "1자 이상 입력")
    },
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp)
)

 

개선된 코드에서는 maxLength 만 사용하고 있지만, minLength 는 데이터 저장과 같은 로직에서 validation 을 할때 사용하시면 되겠습니다.

 

감사합니다.