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

 

Results 1 - 5 of 10 12
Posted on Jun 07, 2017 06:57 AM
nedash says:
 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";
        }
    }

 Replace above code with below.

function functionSetColor(Textbox, WaterMark) {
    if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
        Textbox.style.color = "#b1b1b1";
        Textbox.style.fontSize = "14.5px";
    } else {
        Textbox.style.color = "black";
        Textbox.style.fontSize = "14.5px";
    }
}

 


Posted on Jun 07, 2017 07:30 AM

hi indresh I change code like :

   <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") {
            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>

but it doesn't work

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


Posted on Jun 07, 2017 09:05 AM

hi indresh

did you set css for Txtserach ?

below is css for Txtsearch

.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;
}

here I define fontsize:18px  for Txtsearch when run page watermark will display 18px and when click on text box it will change to 14px

 

 

 


Posted on Jun 08, 2017 12:57 AM

hi indresh I test your code:

for see result better  increase css fontsize:25px  please refer below video:

https://vimeo.com//220756335

 

here as you see I put fontsize:25px in css and fontsize:14.5 in script but it just effect fontsize:14.5 for textbox's font and textbox's watermark after that as you see I comment fontsize:14.5px in scritp it will show textbox's watermark in 25px