文字列（複数行）の文字数をカウントして、上限文字数以上入力できないようにする方法をご紹介！

500文字まで
1.文字数を超える入力を制限する
2.文字数を超えていたらエラーメッセージを表示する

kintoneは顧客管理や社内申請など様々な用途で利用することができる便利なツールです。
そして、ITにそこまで詳しくなくても使えるノーコードツールである点も非常に魅力的です。

しかしながら、業務改善に向けてkintoneをしっかりと活用している方ほど、
「こんなことができたらもっといいのに…」と感じる場面も多いはず…！

文字列（複数行）の文字数をカウントして、上限文字数以上入力できないようにしたいなぁ。

こんな処理を実装したいと思ったことはありませんか？

今回の記事はそんな悩みの解決の手立てになれば幸いです。

---

使用するAPIについて

今回、メインで使用するAPIはこちらです。

フィールド要素を取得する

フィールドコードを指定して、現在開いているレコード内のフィールド要素を取得します。

cybozu.dev

JavaScriptカスタマイズのサンプルコード

文字列（複数行）の文字数をカウントして、501文字以上の入力を不可とする

フィールドの前提条件は以下の通りです。

	文字列（複数行）
フィールド名	申し送り
要素ID	message
選択肢	–
処理内容	上限文字数を500文字（改行を含む）とし、501文字以上の入力を不可とする。

今回は文字数を超過した際の処理内容を2パターン検討してみたいと思います。

1. 文字数を超えて入力すること自体を制限する
2. 文字数を超えたタイミングでエラーメッセージを表示する

どちらも共通でレコードの保存はできない制御を加えます。

共通：文字数カウント関数

const countChars = (str) => Array.from(str || '').length;
const cutToMax = (str, max) => Array.from(str || '').slice(0, max).join('');

なお、改行をカウントしない場合は以下の内容に変更すると良いと思います。

const countChars = (str) => Array.from(str.replace(/\n/g, '')).length;

1.文字数を超えて入力すること自体を制限する

(() => {
  'use strict';

  const FIELD_CODE = 'message';
  const MAX = 500;

  // 動作するイベントを定義
  const events = [
    'app.record.create.submit',
    'app.record.edit.submit'
  ];

  // 文字数カウント関数
  const countChars = (str) => Array.from(str || '').length;
  const cutToMax = (str, max) => Array.from(str || '').slice(0, max).join('');

  // 処理内容を関数化
  const attachLimiter = () => {
    // 文字列（複数行）のフィールド要素を取得する
    const fieldEl = kintone.app.record.getFieldElement(FIELD_CODE);
    if (!fieldEl) return;

    const textarea = fieldEl.querySelector('textarea');
    if (!textarea) return;

    // 二重バインドを防止します
    if (textarea.dataset.charLimitAttached === '1') return;
    textarea.dataset.charLimitAttached = '1';

    // 入力内容が変わったときの処理内容を記載
    textarea.addEventListener('input', () => {
      const current = textarea.value;

      // 現在文字数を500文字と比較
      if (countChars(current) <= MAX) return;

      // 500文字を超えていたらそれ以上の文字をカットする
      const trimmed = cutToMax(current, MAX);
      textarea.value = trimmed;

      // kintoneのレコードに反映する
      const rec = kintone.app.record.get();
      rec.record[FIELD_CODE].value = trimmed;
      kintone.app.record.set(rec);
    });
  };

  // レコード作成画面・レコード編集画面で動作
  kintone.events.on(events, (event) => {
    attachLimiter();
    return event;
  });
})();

2.文字数を超えたタイミングでエラーメッセージを表示する

(() => {
  'use strict';

  const FIELD_CODE = 'message';
  const MAX = 500;

  const countChars = (str) => Array.from(str || '').length;

  // 動作するイベントを定義
  const events = [
    `app.record.create.change[FIELD_CODE]`,
    `app.record.edit.change[FIELD_CODE]`,
    'app.record.create.submit',
    'app.record.edit.submit'
  ];

  kintone.events.on(events, (event) => {
    const value = event.record[FIELD_CODE].value || '';
    const len = countChars(value);

    // 現在文字数を500文字と比較
    if (len > MAX) {
      event.record[FIELD_CODE].error = `文字数が上限（${MAX}文字）を超えています。現在：${len}文字`;
    } else {
      event.record[FIELD_CODE].error = null; // エラー解除
    }

    return event;
  });
})();

既にプラグインやJavaScriptカスタマイズを実装している場合は正しく動作しない可能性がございますので、追加する際は注意してください。