TextFieldに複数改行を入力させない

はじめに

以前こちらの記事を公開しました。
今回も「TENBIN」で実装した機能についての記事を書こうと思います。

もっとこうした方がいいとかあれば是非コメントをお願いします！
また、是非「TENBIN」で遊んでみてください！

本文

「TENBIN」では投稿内容の入力画面でTextFieldを使用しています。

ここの実装をしていた時に「これ、140文字分の改行を入力されたらどうすればいいんだろう？」と思いました。
パッと思いついたのは3パターン
①： DBから取得した表示内容に複数改行がある場合、単一改行に変換してから表示する
②： 入力された投稿内容に複数改行がある場合、単一改行に変換してからデータ格納する
③： そもそも複数改行させない

①はFirestoreからデータを確認する時に見辛くなったりするのかな？あと、きっと無駄な容量を使うだろうなぁ〜

②はユーザーが折角改行したのに表示結果が単一改行だと無駄な時間と労力を掛けさせてしまうなぁ

あと、①と②の両方で言えるけど、意図して複数改行を入力したとしたら、開発者側がそれを操作すべきではないなぁ

という理由から、そもそも複数改行を許容しなければいいという③の選択肢を取りました。

そしてこちらがそのコード

struct CostomTextField: View {
    @State private var contents: String = ""

    var body: some View {
        VStack {
            HStack(alignment: .center) {
                Text("投稿内容")
                Text("任意")
                    .font(.caption)
                    .padding(.horizontal, 7)
                    .padding(.vertical, 2)
                    .background(.gray)
                    .foregroundColor(.white)
                    .cornerRadius(12)
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            TextField("", text: $contents, axis: .vertical)
                .onChange(of: self.contents) { oldValue, newValue in
                    // ここで連続する改行を削除しています。
                    let sanitizedString = newValue.replacingOccurrences(of: "\n\n+", with: "\n", options: .regularExpression)
                    if sanitizedString != newValue {
                        self.contents = sanitizedString
                    }
                }
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)
        }
    }
}

ポイントは、

let sanitizedString = newValue.replacingOccurrences(of: "\n\n+", with: "\n", options: .regularExpression)

の部分です。
"\n\n+" は複数改行のことを表現しています。
"\n" は単一改行のことを表現しています。
正規表現です。

.onChangeはTextFieldに値が入力されたことを検知して実行されます。
なので、TextFieldに文字が入力された時に入力内容をチェックして、複数改行が入力されたら、単一改行に変換されるようになります！

さいごに

今回はSwiftuiのTextFieldについてのコードを書きましたが、これはモバイルとwebで活用できる考え方だと思いますので、適宜複数改行非許容ロジックを実装してみてはいかがでしょうか！

あと、ここまで書いておいて何ですが、

TextEditor(text: $text)
    .frame(width: 250, height: 250)

を使えば表示サイズは固定で複数改行を入力・表示できることを記事作成中に知りました。
もっと早く知りたかった。。。
（参考：https://tokizuoh.hatenablog.com/entry/2022/02/26/140406）

おわり