+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to get a watermark inside the search text box

How to get a watermark inside the search text box

14 posts, 0 answered
  1. eraashishgupta
    eraashishgupta avatar
    50 posts
    Registered:
    26 Nov 2008
    03 Jan 2009
    Link to this post
    I want a watermarked text  as "search...." inside my search text box is there a way to achieve this functionality in sitefinity search.
    Thanks

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    05 Jan 2009
    Link to this post
    Hi eraashishgupta,

    You can achieve desired functionality using javascript as the example below demonstrates.

    <%@ Register Assembly="Telerik.Cms.Web.UI" Namespace="Telerik.Cms.Web.UI" TagPrefix="sfWeb" %> 
     
    <sfWeb:CssFileLink ID="CssFileLink1" FileName="~/Sitefinity/ControlTemplates/Search/searchCommonLayout.css" Media="screen" runat="server" /> 
     
    <style type="text/css"
    /* Search Box */ 
    .sf_searchBox label 
     display: block; 
    /* Search Box */ 
    .sf_searchBox 
     position: relative; 
    .sf_searchBox label 
     display: block; 
     position: absolute; 
     top: 3px; 
     left: 4px; 
     color: #000; 
     font-style: italic; 
     color: #666; 
     font-size: .95em; 
    .sf_searchBox .sf_searchText 
     border: 1px solid #BEBEBE; 
     padding: 2px; 
     width: 140px; 
     height: 17px; 
     font-size: 12px; 
     vertical-align: middle; 
     
    .sf_searchBox .sf_searchSubmit 
     font-weight: bold; 
     padding: 0 0 2px; 
     font-size: .9em; 
     vertical-align: middle; 
     width: 60px; 
     text-align: center; 
    .sf_s 
        text-indent: 0px; 
    </style> 
     
     
    <script type="text/javascript"
        function hideLabel(obj, flag) { 
            var lbl = obj.parentNode.getElementsByTagName('label')[0]; 
            if (flag) { 
                lbl.style.textIndent = "-99999px"
            } else { 
                if (obj.value === '') 
                    lbl.style.textIndent = "0px"
                else 
                    lbl.style.textIndent = "-99999px"
            } 
     
        } 
        function focusSearchField(obj) { 
            var id, field; 
            id = obj.getAttribute('for'); 
            if (id && (field = document.getElementById(id))) { 
                field.focus(); 
            } 
     
        } 
    </script> 
     
    <fieldset class="sf_searchBox"
    <asp:Label runat="server" AssociatedControlID="queryText" onclick="focusSearchField(this);" >Search Blog</asp:Label> 
    <asp:TextBox ID="queryText" Text="Search Blog" runat="server" CssClass="sf_searchText" onfocus="hideLabel(this,true); " onblur="hideLabel(this,false); " /> 
    <input type ="button" id="searchButton" runat="server" class="sf_searchSubmit" value="Search" alt="Search"/> 
     
    </fieldset> 
    <script type="text/javascript"
        hideLabel(document.getElementById('ctl00_Contentplaceholder1_SearchBox1_ctl00_ctl00_queryText'), false); 
    </script> 

    I hope this helps.

    Sincerely yours,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Brook
    Brook avatar
    39 posts
    Registered:
    21 Mar 2007
    07 Jan 2009
    Link to this post
    Would be nice if the search text box utilized RadText box then it would be really easy to do this without so much JS.  Just an idea...
  4. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    08 Jan 2009
    Link to this post
    Hello Brook,

    Well, you can actually change the Inputbox in the control template with RadTextbox.

    Other than that, yes, it is a nice idea. We haven't think for that before :)

    Best wishes,
    Georgi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  5. Brook
    Brook avatar
    39 posts
    Registered:
    21 Mar 2007
    08 Jan 2009
    Link to this post
    There is this great company, Telerik.  They have some other very slick controls you could use!

    Keep up the great work  ;)

    Sitefinity supporter,
    Brook
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    08 Jan 2009
    Link to this post
    Hi Brook,

    In Sitefinity you can use every control that comes with Telerik.Web.UI assembly. The current version of Sitefinity uses Q2 RadControls for ASP.NET AJAX. We will include Q3 from 3.6

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  7. Jeremy Wadsworth
    Jeremy Wadsworth avatar
    6 posts
    Registered:
    01 Mar 2006
    23 Jul 2009
    Link to this post
    I'm using 3.6 SP2 and I was able to easily change the TextBox to a RadTextBox. However, the submit-on-enter in the RadTextBox doesn't work as it did with the TextBox. Is there an easy way to fix this?

    Jeremy
  8. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    23 Jul 2009
    Link to this post
    Hello Jeremy Wadsworth,

    You can set focus on the search button, so that when you press enter the search will proceed.

    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Jeremy Wadsworth
    Jeremy Wadsworth avatar
    6 posts
    Registered:
    01 Mar 2006
    23 Jul 2009
    Link to this post
    How does setting focus to the button help. If the user presses Enter while in the RadTextBox, it should submit just like the TextBox. If I set focus to the button when the user presses Enter in the RadTextBox, then they have to press Enter again to get the button to submit.
  10. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    23 Jul 2009
    Link to this post
    If you set the focus to the button with javascript onload, you will still be typing in the field but the enter button will activate the button rather than the text box. I remember seeing code to do this in one of the sitefinity control templates, I'll see if I can track this down.

    Alternatively, you could wrap the radtextbox in an asp:panel set the defaultbutton to your submit button's ID, and then that will work too. I had a problem where all browsers (firefox, chrome, opera) except internet explorer (big surprise!) would submit on enter. I had to use this panel method to get the enter to work across all browsers.

    Additionally, check this link out: http://www.beansoftware.com/ASP.NET-Tutorials/Accept-Enter-Key.aspx

    Regards,
    anders
  11. Georgi
    Georgi avatar
    3583 posts
    Registered:
    28 Oct 2016
    24 Jul 2009
    Link to this post
    Hello andersleet,

    Thank you for providing help in forums! We appreciate that.

    Kind regards,
    Georgi
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  12. andersleet
    andersleet avatar
    155 posts
    Registered:
    03 Jun 2009
    24 Jul 2009
    Link to this post
    That's what forums are for!

    Glad to be of assistance :)

    anders
  13. Sharlyne
    Sharlyne avatar
    30 posts
    Registered:
    14 Aug 2008
    23 May 2011
    Link to this post
    Ivan, I've read every other post on telerik about how to add in a watermark and your various posts, but I just cannot get your sample code to work for me.

    I added your javascript as is from this post and then added the onfocus/onblur to my asp:textbox, but it appears as if nothing is being executed. Is there something that I am missing??

    this is what i have:

    <

     

    script type="text/javascript">

     

     

    function hideLabel(obj, flag) {

     

     

     

    var lbl = obj.parentNode.getElementsByTagName('TextBox')[0];

     

     

     

    if (flag) {

     

     

    lbl.style.textIndent =

    "-99999px";

     

     

    }

    else {

     

     

     

    if (obj.value === '')

     

     

    lbl.style.textIndent =

    "0px";

     

     

     

    else

     

    lbl.style.textIndent =

    "-99999px";

     

     

    }

     

    }

    </

     

    script>

     

    <

     

    div class="sf_searchBox">

     

     

    <asp:Label runat="server" AssociatedControlID="queryText" Text="Site Search" cssClass="sf_searchLabel" visible="false" />

     

     

    <asp:TextBox ID="queryText" runat="server" CssClass="sf_searchText" MaxLength="100" OnFocus="javascript:hideLabel(this,true); " onblur="hideLabel(this,false); ">test</asp:TextBox>

     

     

    <input type ="button" id="searchButton" runat="server" alt="Search" value="Go" />

     

     

    </

     

    div>

     

  14. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    24 May 2011
    Link to this post
    Hello ASA,

    Then, you can try using RadTexBox control. Please check this demo.

    All the best,
    Ivan Dimitrov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Register for webinar
14 posts, 0 answered