Custom Object to format default text

[JordanG]

Currently when setting the default text in the properties for a text field in Archer, there is no visible distinction between regular text in the field and default text. I'm trying to make a custom object which will colour the default text grey and put it in italics so it's clearer to users that the text needs to be updated.

I've managed to make it partially work, where it is making the default text grey and italicised, and when the text area is focused it will go back to regular formatting, but the moment the text area loses focus, it reverts back to grey and italics.

Anyone have any idea how I can fix this to make it work when the field is not focused?

<style>
    .defaultTextStyle {
        color: grey;
        font-style: italic;
    }
    .normalTextStyle {
        color: black;
        font-style: normal;
    }
</style>

<script>
Sys.Application.add_load(function() {
    var textField = 31764;
    var textFieldSelector = '[id*="f' + textField + 'c"]';
    var defaultText = "Detail what happened, to who, and why, staying factual and succinct.";

    function applyStyles() {
        var textFieldValue = $(textFieldSelector).val();
        console.log("applyStyles function, value = " + textFieldValue);
		console.log("applyStyles function, class = " + $(textFieldSelector).attr('class'));

        if (textFieldValue === defaultText) {
            $(textFieldSelector).addClass('defaultTextStyle');
            console.log("IF statement TRUE, value = " + textFieldValue);
			console.log("IF statement TRUE, class = " + $(textFieldSelector).attr('class'));
        } else {
            $(textFieldSelector).removeClass('defaultTextStyle').addClass('normalTextStyle');
            console.log("IF statement FALSE, value = " + textFieldValue);
			console.log("IF statement FALSE, class = " + $(textFieldSelector).attr('class'));
        }
    }

    // Initial style application
    applyStyles();

    // Add event listeners for focus and blur events
    $(textFieldSelector).on('focus', function() {
        $(textFieldSelector).removeClass('defaultTextStyle').addClass('normalTextStyle');
        console.log("On Focus, class = " + $(textFieldSelector).attr('class'));
    });

    $(textFieldSelector).on('blur', function() {
        applyStyles();
    });
});
</script>

 - Default text being formatted as expected

 - When field in focus, working as expected

 - When out of focus, not being formatted as expected

[DavidPetty]

You might have to use a MutainObserver on the element to see when the class changes between when the user clicks into the field and when the user clicks away, javascript - MutationObserver class changes - Stack Overflow

[JordanG]

I've figured it out. The problem was there's an input object, as well as a div object. The div seemed to inherit the class from the input at the start, but wouldn't re-inherit the updated class after.

Updated the code to make class changes to the div, rather than the input, and that seems to have fixed my problem. 

Here's the updated working code, which is as simplified down as I can get it, hopefully someone else finds a use for this.

<style>
	/* Set the style of the default text */
    .defaultTextStyle {
        color: grey;
        font-style: italic;
    }
</style>

<script>
Sys.Application.add_load(function() {
    var textField = 31764; // Text field ID you want default text style to apply to
    var textFieldSelector = '[id*="f' + textField + 'c"]'; // This finds the text field which we will check the value of
	var textFieldDiv = $('[id*="f' + textField + 'c_text"]'); // This finds the div which drives the style
    var defaultText = "Detail what happened, to who, and why, staying factual and succinct."; // The value of the default text set in the field

    function applyStyles() {
        var textFieldValue = $(textFieldSelector).val(); // Checks the value of the text field

        if (textFieldValue === defaultText) {
            textFieldDiv.addClass('defaultTextStyle'); // Add defaultTextStyle if value of text field is defaultText
        } else {
			textFieldDiv.removeClass('defaultTextStyle'); // Remove defaultTextStyle from div if value no longer defaultText
        }
    }

    // Initial style application
    applyStyles();

    // Add event listeners for focus and blur events
    $(textFieldSelector).on('focus', function() {
        textFieldDiv.removeClass('defaultTextStyle'); // Remove defaultTextStyle from div on focus
    });

    $(textFieldSelector).on('blur', function() {
        setTimeout(applyStyles, 10); // Delay on blur so Archer can update class before the script changes it
    });
});
</script>

[JordanG · Accepted solution]

There was actually a 'bug' using my previous code, where if you clicked from one text field straight into another one, that wasn't classified as a blur event. Have updated the code, and also made it work for multiple fields each with different default text, if required.

This is my updated code.

<style>
    /* Set the style of the default text */
    .defaultTextStyle {
        color: grey;
        font-style: italic;
    }
</style>

<script>
Sys.Application.add_load(function() {
	/* Currently setup to only work on a single field
	Remove the comment tags within the fields variable if you want multiple fields to have the default text formatting
	Can duplicate/remove lines within the array if you need more/less than 3 fields */
    var fields = [
        /*{ id: 28237, defaultText: "Default text for the text field" },
        { id: 30196, defaultText: "Another thing of default text for text box" }, */
        { id: 31764, defaultText: "Detail what happened, to who, and why, staying factual and succinct." }
    ];

    function applyStyles(field) {
        var textFieldSelector = '[id*="f' + field.id + 'c"]'; // This finds the text field which we will check the value of
        var textFieldDiv = $('[id*="f' + field.id + 'c_text"]'); // This finds the div which drives the style
        var textFieldValue = $(textFieldSelector).val(); // Checks the value of the text field

        if (textFieldValue === field.defaultText) {
            textFieldDiv.addClass('defaultTextStyle'); // Add defaultTextStyle if value of text field is defaultText
        } else {
            textFieldDiv.removeClass('defaultTextStyle'); // Remove defaultTextStyle from div if value no longer defaultText
        }
    }

    fields.forEach(function(field) {
        var textFieldSelector = '[id*="f' + field.id + 'c"]';
        var textFieldDiv = $('[id*="f' + field.id + 'c_text"]');

        // Add event listeners for focus and input events
        $(textFieldSelector).on('focus', function() {
            textFieldDiv.removeClass('defaultTextStyle');
        });

        // Ensure styles are applied when the text changes
        $(textFieldSelector).on('input', function() {
            textFieldDiv.removeClass('defaultTextStyle');
        });
    });

    // Apply styles to all fields on page load
    fields.forEach(function(field) {
        applyStyles(field);
    });

    /* Handle form-wide focus and blur events
	This is needed as clicking between text fields does not count as a blur event */
    $(document).on('focusin', function() {
        fields.forEach(function(field) {
            applyStyles(field);
        });
    });

    $(document).on('focusout', function() {
        setTimeout(function() {
            fields.forEach(function(field) {
                applyStyles(field);
            });
        }, 10);
    });
});
</script>