hiI use below code to show watermark in textbox ltscript type34textjavascript34gt function WaterMarktxt evt msg if txtvaluelength 0 ampamp evttype 34blur34 txtstylecolor 34b1b1b134 txtvalue msg if txtvalue msg ampamp evttype 34focus34 txtstylecolor 34black34 txtvalue

Hi nedash Refer the below sample codelthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery183jqueryminjs34gtltscriptgt ltscript type34textjavascript34gt windowonload function SetColorOnPageLoad var defalutNameText 34enter your name34 var defalutTellText 34enter your tell34 functionSetColordocumentgetElementById34TextBox134 defalutNameText functionSetColordocumentgetElementById34TextBox234 defalutTellText function functionSetColorTextbox WaterMark if Textboxvaluelength gt 0 ampamp Textboxvalue WaterMark Textboxstylecolor 34b1b1b134 else Textboxstylecolor 34black34

Display default Text Label (Watermark text) for multiple TextBox using JavaScript in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Apr 06, 2017 10:49 AM
Forum: JavaScript
Answer: 1
Views: 4733

I use below code to show watermark in textbox

   <script type="text/javascript">
            function WaterMark(txt, evt, msg) {
                if (txt.value.length == 0 && evt.type == "blur") {
                    txt.style.color = "#b1b1b1";
                    txt.value = msg;
                }
 
                if (txt.value == msg && evt.type == "focus") {
                    txt.style.color = "black";
                    txt.value = "";
                }
            }
        </script>
 <asp:TextBox ID="TextBox1" runat="server" CssClass="txtSef" Text="enter your name" onkeydown = "return isNumeric(event.keyCode);" onpaste = "return false;"
       ForeColor="#b1b1b1" onblur="WaterMark(this, event,'enter your name');" onfocus="WaterMark(this, event,'enter your name');"></asp:TextBox>

here I define button that when click on button it will bind gridview according text that users type into textbox

now problem is as you see watermark color here is #b1b1b1 when I type text into textbox color change to black untill now every things is ok but when I click button to bind gridview it change textbox text's color to #b1b1b1 I want it be black I want just watermark color be #b1b1b1 but here when click button it change textbox text's color to b1b1b1

best regards

neda

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

kalpesh

0 6

Reply
ANSWER
User: kalpesh
Replied: on Apr 10, 2017 03:02 AM
Modified: on Apr 10, 2017 03:03 AM
Report

Hi nedash,

Refer the below sample code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        window.onload = function SetColorOnPageLoad() {
            var defalutNameText = "enter your name";
            var defalutTellText = "enter your tell";
            functionSetColor(document.getElementById("TextBox1"), defalutNameText);
            functionSetColor(document.getElementById("TextBox2"), defalutTellText);
        }
        function functionSetColor(Textbox, WaterMark) {
            if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
                Textbox.style.color = "#b1b1b1";
            } else {
                Textbox.style.color = "black";
            }
        }
        function WaterMark(txt, evt, msg) {
            if (txt.value.length == 0 && evt.type == "blur") {
                txt.style.color = "#b1b1b1";
                txt.value = msg;
            }
            if (txt.value == msg && evt.type == "focus") {
                txt.style.color = "black";
                txt.value = "";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input name="TextBox1" type="text" value="enter your name" id="Text1" class="txtSef"
            onpaste="return false;" onblur="WaterMark(this, event,&#39;enter your name&#39;);"
            onfocus="WaterMark(this, event,&#39;enter your name&#39;);" style="color: #B1B1B1;" />
        <input name="TextBox2" type="text" value="enter your tell" id="Text2" class="txtSef"
            onpaste="return false;" onblur="WaterMark(this, event,&#39;enter your tell&#39;);"
            onfocus="WaterMark(this, event,&#39;enter your tell&#39;);" style="color: #B1B1B1;" />
        <input type="button" name="btnText" value="Text" id="Submit1" />
    </div>
    </form>
</body>
</html>

Demo

Below is the ASP controls that you need to replace with the html controls.

<asp:TextBox ID="TextBox1" runat="server" CssClass="txtSef" Text="enter your name"
    onpaste="return false;" ForeColor="#b1b1b1" onblur="WaterMark(this, event,'enter your name');"
    onfocus="WaterMark(this, event,'enter your name');"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" CssClass="txtSef" Text="enter your tell"
    onpaste="return false;" ForeColor="#b1b1b1" onblur="WaterMark(this, event,'enter your tell');"
    onfocus="WaterMark(this, event,'enter your tell');"></asp:TextBox>
<asp:Button ID="btnText" Text="Text" runat="server" />

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

Display default Text Label (Watermark text) for multiple TextBox using JavaScript in ASP.Net

Company

Explore

Follow us

Contact Us