cordova Posted March 3, 2022 Report Share Posted March 3, 2022 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? Quote Link to comment Share on other sites More sharing options...
0 futurist Posted March 3, 2022 Report Share Posted March 3, 2022 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 Quote Link to comment Share on other sites More sharing options...
0 Meekeee Posted November 25, 2022 Report Share Posted November 25, 2022 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! Quote Link to comment Share on other sites More sharing options...
Question
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?
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.