Design and CSS styles
Version 6.x > Design and CSS styles > Gray Text in Search Box View modes: 
User avatar
Member
Member
ksigman-canyonco - 1/28/2013 1:58:22 PM
   
Gray Text in Search Box
How do I make the search box (from the Corporate Site) that has the option for grayed out content, and when I click on it to enter text, the grayed out portion, it disappears and allows me to enter the desired text?

Example:

A "Search" text box. The words "Search Keywords Here" are inside the text box grayed out, when I click, those words disappear and I write whatever I want to search for in it.

User avatar
Kentico Support
Kentico Support
kentico_jurajo - 1/29/2013 1:06:44 AM
   
RE:Gray Text in Search Box
Hi,

You will need to use custom javascript and add it to the page or to the search box web part directly.

Best regards,
Juraj Ondrus

User avatar
Kentico MVP
Kentico MVP
Brenden Kehren - 1/30/2013 9:28:35 AM
   
RE:Gray Text in Search Box
You could duplicate the webpart (because you'll be making a change to a base Kentico webpart) and make one of these simple changes:

- add the placeholder attribute to the TextBox (if using HTML5)

- You could make your copied webpart ascx control like so:
<script type="text/javascript">
function setPlaceholdertext() {
var oText = document.getElementById('clientIDOfTextBox1');
if (oText != null) {
// if taking focus away from textbox check to see if any text was entered, if not set the text
if (oText.value.length < 1) {
oText.value = 'Search Text';
}
}
}

function clearPlaceholdertext() {
var oText = document.getElementById('clientIDOfTextBox1');
if (oText != null) {
if (oText.value == 'Search Text') {
// clear the text from the box when clicked on
oText.value = '';
}
}
}
</script>
<cms:CMSTextBox
ID="txtWord" runat="server" onblur="setPlaceholdertext();" onclick="clearPlaceholdertext();" />