ios - 向 UITextField 添加下划线占位符

Question

我有一个 View ，用作用户验证通过短信发送给他的代码以便登录的 View (6 位代码)。

所以我尝试创建一个仅包含 6 位数字的 UITextField，并且我希望它为每个数字都有一个下划线占位符。像这样:

有人知道我该如何实现这一目标吗？

谢谢!

Answer 1

您可以使用 textField 委托(delegate)协议(protocol)函数 shouldChangeCharactersIn range: NSRange 在键入时修改字符串。

0) 确保文本字段是您要查找的文本字段

1)获取选定的文本范围，并获取文本字段中当前文本的副本，否则失败

2) 使用这些变量，获取当前索引 (Int) 和 currentStringIndex (String.Index)

3)确定替换字符串是删除(“”)还是实际字符

4) 删除前一个字符

4.1 - 确保当前索引不是开始，并设置上一个位置和上一个范围

4.2 - 删除前一个字符并替换为“_”字符

4.3 - 将光标位置设置为前一个位置

5) 添加角色

5.1 - 确保当前索引位于最大字符索引处，并设置当前位置、当前范围和下一个位置

5.2 - 删除当前字符并替换为新字符

5.3 - 将光标位置设置为下一个位置

6) 由于您已经修改了字符串，因此返回 false

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {

    // 0) Check and make sure textfield is the code textfield
    switch textField {
    case codeTextField:       
        // 1) Set the current selected range and the current text
        guard
            let selectedRange = textField.selectedTextRange,
            var text = textField.text
        else {
            return false
        }

        // 2) Set the current Index and String Index
        let currentIndex = textField.offset(from: textField.beginningOfDocument, to: selectedRange.start)
        let currentStringIndex = text.index((text.startIndex), offsetBy: currentIndex)

        // 3) Check if new character or delete character
        if string == "" {

            // 4.1) Make sure current index isn't the start, and set the previous position and previous range
            guard
                currentIndex > 0,
                let previousPosition = textField.position(from: textField.beginningOfDocument, offset: currentIndex-1),
                let previousRange = textField.textRange(from: previousPosition, to: previousPosition)
            else {
                return false
            }

            // 4.2) Remove the previous character and replace with an '_' character
            text.remove(at: text.index(before: currentStringIndex))
            textField.text = text
            textField.replace(previousRange, withText: "_")

            // 4.3) Set the cursor position to the previous position
            textField.selectedTextRange = textField.textRange(from: previousPosition, to: previousPosition)

        } else {
            // 5.1) Add a new character
            guard
                currentIndex < 6,
                let currentPosition = textField.position(from: textField.beginningOfDocument, offset: currentIndex),
                let currentRange = textField.textRange(from: currentPosition, to: currentPosition),
                let nextPosition = textField.position(from: textField.beginningOfDocument, offset: currentIndex+1)
            else {
                return false
            }

            // 5.2) Remove the current character and replace with the new character
            text.remove(at: currentStringIndex)
            textField.text = text
            textField.replace(currentRange, withText: string)

            // 5.3) Set the cursor position the the next position
            textField.selectedTextRange = textField.textRange(from: nextPosition, to: nextPosition)
        }

        // 6)
        return false

    default:
        return true
    }
}