【kintone】プレースホルダー

注記を書きたいが、ラベルは使いたくないという場合にプレースホルダーが便利。

追加画面と編集画面では、kintone UI Component の Text にある placeholder の
プロパティを使うといい。インライン編集画面に対応するにはDOM操作をするか
カスタマイズビューを作るしかない。

---

フィールド名とフィールドコードが 数値 の数値フィールドに、プレースホルダーを出す例。

数値フィールドの右に、要素IDが space のスペースフィールドを置く。

PC用のJavaScriptファイルを以下の順番で並べる。
1. kuc.min.js
2. sample.js

sample.jsは下記のように書く。

sample.js

(() => {
  'use strict';

  // 追加画面か編集画面を表示したときの処理
  kintone.events.on(['app.record.edit.show', 'app.record.create.show'], (event) => {
    const record = event.record;
    
    // 数値フィールドを非表示にする
    kintone.app.record.setFieldShown('数値', false);
    
    // 要素IDがspaceのスペースフィールドの要素を取得
    const spaceElement = kintone.app.record.getSpaceElement('space');
    
    // 取得した要素に既に子要素が追加されている場合は何もしない
    if (spaceElement.children.length > 0) {
      return event;
    }
    
    // kintone UI Component の Text を作成
    const text = new Kuc.Text({
      label: '数値',
      placeholder: '数字しか入力できません',
      value: record.数値.value || '',
      textAlign: 'right'
    });

    // スペースフィールドにTextを配置
    spaceElement.appendChild(text);
    
    // Textの位置を8ピクセル右へ調整
    text.style.marginLeft = '8px';
    
    // Textへ入力された値を数値フィールドに転記
    text.addEventListener('input', (e) => {
      // 全角数字を半角に変換
      let value = e.detail.value.replace(/[０-９]/g, (s) => {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
      });
      
      // 数字以外を削除
      value = value.replace(/[^0-9]/g, '');
      
      const currentRecord = kintone.app.record.get();
      currentRecord.record.数値.value = value;
      kintone.app.record.set(currentRecord);
    });
    
    // Textと数値フィールドの値を同期
    text.addEventListener('change', () => {
      const currentRecord = kintone.app.record.get();
      const numericValue = currentRecord.record.数値.value || '';
      
      requestAnimationFrame(() => {
        text.value = numericValue;
      });
    });
    
    return event;
  });

  // インライン編集を始めたときの処理
  kintone.events.on('app.record.index.edit.show', () => {
    // 数値フィールド全てにプレースホルダーを設定
    document.querySelectorAll('input[type="text"].recordlist-forms-number-gaia')
      .forEach(input => input.placeholder = '数字しか入力できません');
  });
})();

---

上記のカスタマイズをすると、このようにプレースホルダーが表示される。