How to change WaterMark font size using jQuery in ASP.Net

Last Reply on Jun 08, 2017 08:53 AM By Indresh

Posted on Jun 07, 2017 04:40 AM

hi I use watermark for textbox in page and I define fontsize for watermark

below are code:

       <script type="text/javascript">
        window.onload = function SetColorOnPageLoad() {
            var defalutAzText = "از";
            var defalutTaText = "تا";
            var defalutsearch = "جستجو بر اساس کد ملک";
            functionSetColor(document.getElementById("Txtsearch"), defalutsearch);
            functionSetColor(document.getElementById("Txtejare1"), defalutAzText);
            functionSetColor(document.getElementById("Txtejare2"), defalutTaText);
            functionSetColor(document.getElementById("txtvadi1"), defalutAzText);
            functionSetColor(document.getElementById("txtvadi2"), defalutTaText);
        }

         function functionSetColor(Textbox, WaterMark) {
        if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
            Textbox.style.color = "#443f13";
            txt.style.fontSize = "14.5px";
 
        } else {
            Textbox.style.color = "white";
            txt.style.fontSize = "14.5px";
        }
    }
 
    function WaterMark(txt, evt, msg) {
        if (txt.value.length == 0 && evt.type == "blur") {
            debugger;
            txt.style.color = "#443f13";
            txt.value = msg;
            txt.style.fontSize = "14.5px";
            txt.style.fontfamily = "behtop_Yekan";

        }
 
        if (txt.value == msg && evt.type == "focus") {
            txt.style.color = "white";
            txt.value = "";
            txt.style.fontSize = "14.5px";
            txt.style.fontfamily = "behtop_Yekan";
        }
    }
</script>

problem is that here at first when run page it shows watermark with size that I define for textbox (in css) and when I click on textbox and after that  click out of text box it will display watermark's fontsize  that I define an above code

please refer below video:

https://vimeo.com//220612125

 

best regards

neda

 

Posted on Jun 07, 2017 08:45 AM Modified on on Jun 08, 2017 10:02 AM

Hi nedash,

I have cross check your code, here everything working fine.So please refer the below code.

HTML

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="Txtsearch" Text="جستجو بر اساس کد ملک" onblur="WaterMark(this, event,'جستجو بر اساس کد ملک');"
        runat="server" class="txtser" onfocus="WaterMark(this, event,'جستجو بر اساس کد ملک');" />
    <asp:TextBox ID="Txtejare1" Text="از" onblur="WaterMark(this, event,'از');" onfocus="WaterMark(this, event,'از');"
        runat="server" />
    <asp:TextBox ID="Txtejare2" Text="تا" onblur="WaterMark(this, event,'تا');" onfocus="WaterMark(this, event,'تا');"
        runat="server" />
    <asp:TextBox ID="txtvadi1" Text="تا" onblur="WaterMark(this, event,'از');" onfocus="WaterMark(this, event,'از');"
        runat="server" />
    <asp:TextBox ID="txtvadi2" Text="از" onblur="WaterMark(this, event,'تا');" onfocus="WaterMark(this, event,'تا');"
        runat="server" />
</div>
<div>
    <script type="text/javascript">
        window.onload = function SetColorOnPageLoad() {
            var defalutAzText = "از";
            var defalutTaText = "تا";
            var defalutsearch = "جستجو بر اساس کد ملک";
            functionSetColor(document.getElementById("Txtsearch"), defalutsearch);
            functionSetColor(document.getElementById("Txtejare1"), defalutAzText);
            functionSetColor(document.getElementById("Txtejare2"), defalutTaText);
            functionSetColor(document.getElementById("txtvadi1"), defalutAzText);
            functionSetColor(document.getElementById("txtvadi2"), defalutTaText);
        }

        function functionSetColor(Textbox, WaterMark) {

            if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
                Textbox.style.color = "#443f13";
                Textbox.style.fontSize = "14.5px";
                

            } else {
                Textbox.style.color = "white";
                Textbox.style.fontSize = "14.5px";
                
            }
        }

        function WaterMark(txt, evt, msg) {
            if (txt.value.length == 0 && evt.type == "blur") {
                txt.style.color = "#443f13";
                txt.value = msg;
                txt.style.fontSize = "14.5px";
                txt.style.fontfamily = "behtop_Yekan";
            }

            if (txt.value == msg && evt.type == "focus") {
                txt.style.color = "white";
                txt.value = "";
                if (txt.name == "Txtsearch") {
                        txt.style.fontSize = "25px";
                    }
               else {
                       txt.style.fontSize = "14.5px";
                    }
                txt.style.fontfamily = "behtop_Yekan";
            }
        }
    </script>
    <style type="text/css">
        .txtser
        {
            font-size: 18px;
            float: right;
            width: 150px;
            height: 25px;
            margin: 23px 38px 0 0;
            background-color: #000;
            border: 1px solid #000;
            color: #fff;
            font-family: m1;
            text-align: center;
        }
    </style>
</div>
</form>

Screenshot