iOSでテキストフィールドの入力文字数をリアルタイムにカウントする方法

iOSアプリ開発において、テキストフィールドの操作とその挙動を扱うスキルは欠かせません。Appleはこの目的のためにUITextFieldDelegateというプロトコルを標準で提供しています。

詳細はApple公式ドキュメントをご参照ください。
UITextFieldDelegate – Apple Developer Documentation

フォーム入力を含むアプリを使ったことがある方なら、テキストを入力すると同時に文字数が表示され、入力できる文字数が制限されている場面を見たことがあるでしょう。本記事では、テキストフィールドへ入力する際に文字数を表示する方法を、ステップごとにわかりやすく解説します。

実装手順

ステップ1：プロジェクトの作成

Xcodeを起動し、「New Project」→「Single View Application」を選択します。プロジェクト名は「TextFieldCount」としましょう。

ステップ2：UIの配置とアウトレット接続

Main.storyboardを開き、下図のようにTextFieldとLabelを配置します。続いて、LabelとTextFieldそれぞれに対して@IBOutletを作成し、名前をそれぞれ「lblCount」「txtInputBox」として接続してください。

ステップ3：デリゲートの設定

ViewController.swiftでUITextFieldDelegateプロトコルを採用し、txtInputBoxのdelegateをselfに設定します。

class ViewController: UIViewController, UITextFieldDelegate {
txtInputBox.delegate = self

ステップ4：デリゲートメソッドの実装

shouldChangeCharactersInデリゲートメソッドを実装し、その中に以下のコードを記述します。

func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
    if(textField == txtInputBox){
        let strLength = textField.text?.count ?? 0
        let lngthToAdd = string.count
        let lengthCount = strLength + lngthToAdd
        self.lblCount.text = "\(lengthCount)"
    }
    return true
}

ステップ5：アプリの実行

アプリをビルドして実行し、動作を確認しましょう。最終的なコード全体は以下の通りです。

サンプルコード（全文）

import UIKit
class ViewController: UIViewController, UITextFieldDelegate {
    @IBOutlet var txtInputBox: UITextField!
    @IBOutlet var lblCount: UILabel!
    override func viewDidLoad() {
        super.viewDidLoad()
        txtInputBox.delegate = self
    }
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        if(textField == txtInputBox){
            let strLength = textField.text?.count ?? 0
            let lngthToAdd = string.count
            let lengthCount = strLength + lngthToAdd
            self.lblCount.text = "\(lengthCount)"
        }
        return true
    }
}

仕組みのポイント

shouldChangeCharactersInは、テキストが実際に変更される前に呼び出されるデリゲートメソッドです。そのため、「現在の文字数＋新しく追加される文字数」を合計してラベルに表示しています。最後にtrueを返すことで、今回の入力操作が許可されます。逆にここでfalseを返せば、特定の条件下で入力を拒否する（文字数上限などの）バリデーションも簡単に実現できます。

実行結果