[swift] texfield에 길이제한두기

swiftUI textfield에 길이 제한둬서 입력방지

 

textfield에 길이를 제한둬서 일정 길이를 넘어서면 더이상 입력이 안되게끔 하는 것이 목표..!

(왼쪽이 우리가 하고자 하는 것)

 

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

먼저, TextLimiter 클래스를 만든다

- Publish 값을 사용하기 위해 ObservableObject로 만들어준다

- 먼저 기본적인 틀을 잡아본다 (변수들과 변수들에 담을 의미, 로직 등)

class TextLimiter: ObservableObject {
    private let limit: Int
    
    init(limit: Int) {
        self.limit = limit
    }
    
    @Published var value = ""
    @Published var hasReachedLimit = false
}

- 여기서 limit은 제한을 둘 길이 (character limit)

- value 변수는 Textfield에 입력되는 값

- hasReachedLimit은 길이제한에 도달했는지 안했는지를 확인해주는 boolean 값

 

 

위에서 세운 로직을 적용하기 위해 value변수를 아래와 같이 update해준다

@Published var value = "" {
    didSet {
        if value.count > self.limit {
            value = String(value.prefix(self.limit))
            self.hasReachedLimit = true
        } else {
            self.hasReachedLimit = false
        }
    }
}

그럼 class TextLimiter는 아래와 같아질 것

class TextLimiter: ObservableObject {
    private let limit: Int
    
    init(limit: Int) {
        self.limit = limit
    }
    
    @Published var value = "" {
        didSet {
            if value.count > self.limit {
                value = String(value.prefix(self.limit))
                self.hasReachedLimit = true
            } else {
                self.hasReachedLimit = false
            }
        }
    }
    @Published var hasReachedLimit = false
}

이제 이렇게 만든 클래스를 사용해본다

아래 예시를 보자.  텍스트 길이를 5로 제한

@ObservedObject var input = TextLimiter(limit: 5)

.border 를 이용해서 길이제한에 도달하면 텍스트 주위 border를 빨간색으로 칠하도록 한다

TextField("텍스트 입력창",
          text: $input.value)
    .border(Color.red,
            width: $input.hasReachedLimit.wrappedValue ? 1 : 0 )

 

 

 

 

reference : 

https://programmingwithswift.com/swiftui-textfield-character-limit