Highlight the entire field including the label when text field is selected

[cordova]

Hi,

Is it possible to highlight the entire field including the label with maybe a different background when that field's text box is selected?

[futurist]

Hi @cordova

You can do this using JavaScript.

On your Submission DP, paste the following on the Footer:
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
$("input[type='text']").focus(function(){

var parent = $(this).parent()

parent.css('background-color','#96d0ff');
parent.prev().css('background-color','#96d0ff');
})

$("input").focusout(function(){

var parent = $(this).parent()

parent.css('background-color','transparent');
parent.prev().css('background-color','transparent');
})
</script>

You may also see the sample DataPage:  https://c1hch576.caspio.com/dp/db26a000e7eeca108e414d0691d0

[Kurumi]

Hi! Just an update - if you would like to highlight search words in the Results Page, you can try these solutions:

1. From this link: https://www.delftstack.com/howto/javascript/highlight-text-using-javascript/

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value.trim();
    if (searched !== "") {
        let text = document.querySelector("table[id*='cbTable']").innerHTML;
        let re = new RegExp(searched,"g"); // search for all instances
        let newText = text.replace(re, `<mark>${searched}</mark>`);
    document.querySelector("table[id*='cbTable']").innerHTML = newText;
    }

});

</script>

You can change the Value1_1 based on the form element of your search field.

2. Using mark.js - https://markjs.io/ This is text highlighter written in JavaScript.

To apply in the DataPage, insert the code below in the Footer of Configure Results Page Fields

<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>

<script>

document.addEventListener('DataPageReady', function (event) {

let searched = document.querySelector("input[name='Value1_1']").value;

    if (searched !== "") {
       var instance = new Mark(document.querySelector("table[id*='cbTable']").tBodies[0]);
       instance.mark(searched);
    }

});
</script>

Result:

I hope this helps!