You should be adding the text as placeholder attribute. You can separately apply styles to it. Something like:
function onLoad () {
var config = {
'short_description': 'Enter a short summary of what will be done under this change record',
'description': 'Enter the list of planned activities (high level) per team to describe what will be done as part of this change record',
};
// This is not necessary if the script is configured not to be isolated
var jQuery = new Function('return jQuery;')();
getMessage(Object.keys(config).reduce(extractTextToTranslate(config), []), applyPlaceholders(config));
function extractTextToTranslate (source) {
return function (messages, key) {
return messages.push(source[key]), messages;
};
}
function applyPlaceholders (config) {
return function (messages) {
Object.keys(config)
.map(getControlAndMessage(config, messages))
.map(addPlaceholder(config, messages))
.map(addPlaceholderStyle());
};
}
function getControlAndMessage (config, messages) {
return function (fieldName) {
return { 'control': g_form.getControl(fieldName), 'message': messages[config[fieldName]], };
};
}
function addPlaceholder () {
return function (controlAndMessage) {
jQuery(controlAndMessage.control)
.attr('placeholder', controlAndMessage.message);
return controlAndMessage.control;
};
}
function addPlaceholderStyle () {
return function (control) {
jQuery('head')
.prepend(getStyle(control.id));
return control;
};
}
function getStyle (id) {
var css = '*[id="element.' + id + '"] .form-control::placeholder { background-color: #f0e0e0; color: red; font-style: italic; };';
return jQuery('<style>')
.text(css);
}
}The Client Script configuration:
And when text is added:
This should give you a head start.
I suppose you can define the desired CSS by modifying function getStyle. But making placeholder text black (the same as regular input) is not a good idea. Placeholder text should be different from regular text - I can tell that even as a regular web consumer. It is frustrating when one cannot outright tell if something is already entered text or just a placeholder. I would actually leave the default that come with the browser. You don't have to worry about dark OS/browser themes vs. light OS/browser themes and support for those.
Also one can easily add other fields by customizing the config object. However do note that composite fields will not work. For that additional functions need to be defined, ones that detect that something is a composite field and return the proper display control.
