お世話になります。
入力画面のフィールド名のラベルの一部の文字だけ色を変えたいと思い、以下のコードを入れましたが、最初に入力画面を開いた際はうまくいきましたが、確認画面から入力画面に戻ると色が元に戻ってしまいます。
JavaScript
function changeLabelColor() {
var labelElements = document.querySelectorAll(‘label’);
labelElements.forEach(function(label) {
var textToHighlight = “必須”;
if (label.textContent.includes(textToHighlight)) {
var newHtml = label.innerHTML.split(textToHighlight).join(‘’ + textToHighlight + ‘’);
label.innerHTML = newHtml;
}
});
}
// CSSスタイルを追加する関数
function addHighlightStyle() {
var style = document.createElement(‘style’);
style.type = ‘text/css’;
style.innerHTML = ‘.highlight { color: #0f62fe; }’; // 青色に変更
document.head.appendChild(style);
}
// FormBridgeのイベントハンドラに関数を適用する
function setupFormBridgeHandlers() {
// 入力画面が更新されたときにラベルの色を変更するイベントハンドラを設定
// 以下のコードは、FormBridgeのAPIに依存しているため、実際のAPIの仕様に合わせて調整してください。
fb.events.input.updated = changeLabelColor; // 例: 入力画面が更新されたとき
fb.events.confirm.updated = changeLabelColor; // 例: 確認画面が更新されたとき
}
// ページの読み込みが完了したら、スタイルを追加し、FormBridgeのイベントハンドラを設定する
document.addEventListener(‘DOMContentLoaded’, function() {
addHighlightStyle();
changeLabelColor(); // 初回の読み込みでラベルの色を変更
setupFormBridgeHandlers(); // FormBridgeのイベントハンドラを設定
});
CSS
.highlight1 {
color: #0f62fe;
}
どのように記述すれば改善されますでしょうか。
お忙しいところ恐縮ですが、よろしくお願いいたします。