kintoneはgetElementByIdを使えず、getElementsByTagNameを使わざる負えない時がある
kintoneのレコード追加画面かレコード編集画面の
["app.record.create.show","app.record.edit.show"]あたりで
document.getElementById();を使ってjavascriptでフィールド達の間でごにょごにょしているのですが、app.record.create.showと app.record.edit.showで該当する文字列1行フィールドなどのhtmlのinputタグの要素 id はイベント発火の度に接尾辞がそれぞれ変化します。kintoneではinputの要素取得をidで行うと毎回変化するIDを毎回取得する必要があります・・・。
そのため、getElementsByTagName();の 配列要素番号 を使い、欲しいHTMLノードを取得し、 setAttributeやgetAttributeで要素上の属性をハンドリングすることになります。
記事タイトルのニュアンスがゆるいですが、個々のフィールドのchangeイベントも取得して他のkintoneアプリも含めてフィールドをjavascriptでごにょるなら、必須のルールです。もっといい方法が有ったら、是非、教えて欲しいです。
画面全体のDOMツリーで3番目のinputに対しての場合
//3番目のinputのhtmlノードを取得
let input_3rd_html_node = document.getElementsByTagName("input")[3];
//3番目のinputのclass要素にhogeを追加（for文でgetAttributeによる取得も可能です）
input_3rd_html_node.setAttribute('class','input-text-cybozu hoge');
//3番目のinputに他の要素を追加
input_3rd_html_node.setAttribute('data-min-length','1');htmlノード取得の行では、コメントアウトにてフィールド名やフィールドコードと「createなどのイベント」「何番目のinput」と一緒に書いておくと後から対応しやすいと思います。DOMツリーを調べるjsのコードは、デフォルトで書いておいてもいいくらいかと思います。また、app.record.create.showとapp.record.edit.showなどで同じinputのHTMLタグに与えられる配列要素番号 が異なるので別々にコードを書く必要があります。kintone.events.onの第1引数に配列でcreateとeditの2つのイベントを入れて行うとハマります。
document内のinputのノードの順番を調べる方法
//全inputを順番に取得
let all_html_input_node_number = document.getElementsByTagName("input");
//コンソールログに表示
console.log('all_html_input_node_number',all_html_input_node_number);上記でお目当てのinputのHTMLタグが何番目なのか確認してください。もちろん、0番目からカウントしてください。
複数の名前空間を持ったドキュメントを扱う際【参考】
element.getElementsByTagNameNSなども有るらしいです。挙動確認していません。
IDによるHTMLノード取得をいろいろ考えましたがダメでした
inputのHTMLタグのidに対して正規表現の前方一致で¥＾を使いましたがあまりでうまくいかず・・・
さらに、jQueryの要素取得をid内の接頭辞に対して上記の様に仕掛けましたが、吐き出されるオブジェクト形式が見慣れないやつでめんどくさい・・・。
kintoneでgetElementByTagName()を使う場合
「アプリの設定」⇒「フォーム」でフィールドを後から増減操作などした場合、対象のinputのhtmlタグについてノードリストの順番が変わってしまっていないか？毎回、確認する必要があります。誰かが知らずにフィールド増減するとinputに仕掛けたjsが動かなくなるなどが起きる。ノードツリーで○番目のinput！みたいに使うことになります。めんどくせぇ。
