CSSでサブテーブルのある項目を入力不可にしたいです。
JavaScriptでは行えるのを知っていますが、CSSで行いたいのでコマンドを教えてください。
Isozumi さん
こんにちは。ひよこです。
どうしてもCSSで入力不可（readonly）とする場合は、要素 に pointer-events: none; を指定すると、クリックできなくする（readonlyになる）ことができます。
ただこの方法では、ぱっとフォームを見たときに入力不可かどうかわかりません（背景色が灰色になったりしない）。
kintone の入力要素が disabled のときのスタイルに合わせたほうがよいと思います。
また、DOM要素名を指定しているので、アップデートによって動かなくなる可能性があることが注意点でしょうか…。
要素名 {
pointer-events: none;
color: #888;
backgroud-color: #dbdcdd;
border-width: 0px;
box-shadow: none;
}
ひよこさん
ご教授ありがとうございます。
思った通りの結果（クリックできなくする）となったのですが、これをクリックできるようにするのは
JavaScriptで出来ないのでしょうか？
＜＜マスク解除処理＞＞
kintone.events.on([“app.record.edit.show”], function(event){
// レコード情報取得
var record = event.record;
// 通常フィールドのマスク解除
record.棚卸日.disabled = false;
record.処理内容.disabled = false;
record.明細.value.forEach(function(row) {
row.value.商品コード.disabled = false;
row.value.実棚数.disabled = false;
});
return event;
});
なぜこの処理を実装しようとしたのかは、
１伝票１０００行ぐらいの明細で表示するのに３分ぐらいかかり、
表示している間に明細行にデータが修正出来てしまいます。
（全件表示が終わると、入力する前にデータが戻る。）
表示中にスピナー又は警告メッセージを表示できれば
ユーザーはデータの読込み中と分かるのですが、JavaScript実行前の
kintoneでの処理中の為、制御が行えませんでした。
その為、初期ではCSSで項目を入力不可にして、JSで項目を入力可能にしたかったです。
Isozumi さん
なんでJavaScript は使っちゃだめなのかな？って思ってたのですが、そういうことだったんですね！
可能であれば、サブテーブルにしている明細は別アプリ（「棚卸し結果」アプリ）で記録する＋ 親になるアプリでは関連レコードを使って表示するとしたほうがいい気がします…。
https://kintone.cybozu.co.jp/material/#guidebook の「関連レコード一覧」
同様にDOMを操作するのでアップデートで動かなくなる可能性がありますが、app.record.edit.showイベント内で css を元に戻せば入力できるようになります。
kintone.events.on(["app.record.edit.show"], function(event){
var $inputField = $('#record-gaia .input-text-outer-cybozu');
$inputField.css('pointer-events', 'auto');
return event;
}
jQuery を使っています。カスタマイズ設定画面でカスタマイズファイルの前に jQuery の URLを指定してください。
https://developer.cybozu.io/hc/ja/articles/202960194
ひよこさん
実装できました。
ご教授ありがとうございました。
※念のために、情報共有です。
マウスでクリックした場合、入力は出来ませんでした。
Tabキーで移動させると、移動した項目は入力可能になります。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。