hiI use below code for change dropdownlist appearnce ltscript src34scriptsjqueryselectricminjs34gtltscriptgt ltlink href34CssselectricOcss34 rel34stylesheet34 gtltscript type34textjavascript34gt windowonload function ApplyCss function ApplyCss 39select39selectric maxHeight 200 On PostBack var prm SysWebFo

Hi nedashI have created sample code which fullfill your requirement So please refer the below code and modify as per your requirementltform id34form134 runat34server34gtltdivgt ltaspTextBox ID34Txtsearch34 Text34 34 onblur34WaterMarkthis event39 3934 runat34server34 class34txtser34 onfocus34WaterMarkthis event39 3934 gt ltbr gt ltaspTextBox ID34Txtejare134 Text3434 onblur34WaterMarkthis event393934 onfocus34WaterMarkthis event393934 runat34server34 gt ltbr gt ltaspTextBox ID34Txtejare234 Text3434 onblur34WaterMarkthis event393934 onfocus34WaterMarkthis event393934 runat34server34 gt ltbr gtltdivgtltaspScriptManager runat34server34

Apply watermark for TextBox using jQuery in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Jun 09, 2017 04:18 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3780

I use below code for change dropdownlist appearnce:

    <script src="scripts/jquery.selectric.min.js"></script>
    <link href="Css/selectricO.css" rel="stylesheet" />
<script type="text/javascript">
        window.onload = function () {
            ApplyCss();
        };
        function ApplyCss() {
            $('select').selectric({
                maxHeight: 200
            });
        };
        //On PostBack
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyCss();
                }
            });
        };
    </script>

and use below code for watermark:

<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";
                txt.style.fontfamily = "behtop_Yekan";
                 
 
            } else {
                Textbox.style.color = "white";
                Textbox.style.fontSize = "14.5px";
                txt.style.fontfamily = "behtop_Yekan";
                 
            }
        }
 
        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>

problem is that when I use these code together one of them doesn't work see if at first I use script for dropdown list like below:

                         <script type="text/javascript">
        window.onload = function () {
            ApplyCss();
        };
        function ApplyCss() {
            $('select').selectric({
                maxHeight: 200
            });
        };
        //On PostBack
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyCss();
                }
            });
        };
    </script>
                             
                               <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";
                txt.style.fontfamily = "behtop_Yekan";
                 
 
            } else {
                Textbox.style.color = "white";
                Textbox.style.fontSize = "14.5px";
                txt.style.fontfamily = "behtop_Yekan";
                 
            }
        }
 
        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>

script for dropdownlist doesn't work but water mark worked correctly

but when I use watermark codes at first and then use script for dropdownlist like below:

       <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";
                txt.style.fontfamily = "behtop_Yekan";
                 
 
            } else {
                Textbox.style.color = "white";
                Textbox.style.fontSize = "14.5px";
                txt.style.fontfamily = "behtop_Yekan";
                 
            }
        }
 
        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>

                               <script type="text/javascript">
        window.onload = function () {
            ApplyCss();
        };
        function ApplyCss() {
            $('select').selectric({
                maxHeight: 200
            });
        };
        //On PostBack
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        if (prm != null) {
            prm.add_endRequest(function (sender, e) {
                if (sender._postBackSettings.panelsToUpdate != null) {
                    ApplyCss();
                }
            });
        };
    </script>

here watermark doesn't work but dropdown script worked correctly

how I can use these codes together?

best regards

neda

Download FREE API for Word, Excel and PDF in ASP.Net

Indresh

0 3

Reply
ANSWER
User: Indresh
Replied: on Jun 09, 2017 07:58 AM
Modified: on Jun 09, 2017 09:18 AM
Report

Hi nedash,

I have created sample code which full-fill your requirement. So please refer the below code and modify as per your requirement.

<form id="form1" runat="server">
<div>
    <asp:TextBox ID="Txtsearch" Text="جستجو بر اساس کد ملک" onblur="WaterMark(this, event,'جستجو بر اساس کد ملک');"
        runat="server" class="txtser" onfocus="WaterMark(this, event,'جستجو بر اساس کد ملک');" />
    <br />
    <asp:TextBox ID="Txtejare1" Text="از" onblur="WaterMark(this, event,'از');" onfocus="WaterMark(this, event,'از');"
        runat="server" />
    <br />
    <asp:TextBox ID="Txtejare2" Text="تا" onblur="WaterMark(this, event,'تا');" onfocus="WaterMark(this, event,'تا');"
        runat="server" />
    <br />
</div>
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="DropDownList1" CssClass="dropdownlist" runat="server">
            <asp:ListItem Text="text1" />
            <asp:ListItem Text="text2" />
            <asp:ListItem Text="text3" />
            <asp:ListItem Text="text4" />
            <asp:ListItem Text="text5" />
            <asp:ListItem Text="text6" />
        </asp:DropDownList>
    </ContentTemplate>
</asp:UpdatePanel>
<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);
        ApplyCss();
    }

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

    function ApplyCss() {
        $('select').selectric({
            maxHeight: 200
        });
    };

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplyCss();
            }
        });
    };

</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.selectric.js" type="text/javascript"></script>
<link href="selectric.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .txtser
    {
        font-size: 25px;
        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;
    }
        
    input[type=text]:focus
    {
        font-size: 25px;
    }
</style>
</form>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Apply watermark for TextBox using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us