Question

In the code example below I have made window.status alternate from “a” to “b”

function alternateViaIntrvl() {
    setInterval('alterStatus()', 500);
}
var altrCounter = 0;

function alerted() {
    var txt = "a";
    if (altrCounter % 2 == 0) {
        txt = "b"
    }

    window.status=txta;
    countalerted++;
}

I was just trying to make an alternate Ajax watermark
from “insert date” to “mm/dd/yyyy” but it got too complicated accessing ajax with javascript

set_Text("mm/dd/yyyy")

I then found an alternative to ajax : javascriptWaterMark by Md.Asaduzzaman Azad

and I tried to implement a setInterval() on that code,

so I will be able to have a neat dual mode JavaScript-Watermark.

I know it must be simple as in the example of window.status alternate code but I couldn’t figure out for myself how to implement it .

JavaScript

 function Focus(objname, waterMarkText) {
        obj = document.getElementById(objname);
        if (obj.value == waterMarkText) {
            obj.value = "";
            obj.className = "NormalTextBox";
            if (obj.value == "insert date" || obj.value == "" || obj.value == null) {
                obj.style.color = "black";
            }
        }
    }



 function Blur(objname, waterMarkText) {
        var alternateWM1 = "insert date";
        var alternateWM2 = "mm/dd/yyyy";
        count++;
        obj = document.getElementById(objname);
        if (obj.value == "") {
            obj.value = waterMarkText;
            if (objname != "txtPwd") {
                obj.className = "WaterMarkedTextBox";
            }
            else {
                obj.className = "WaterMarkedTextBoxPSW";
            }
        }
        else {
            obj.className = "NormalTextBox";
        }



 if (obj.value == "insert date" || obj.value == "" || obj.value == null) {
    obj.style.color = "gray";
    }

}

• html

    <table>
        <tr>
            <td>
                User Id
            </td>
            <td>
                <asp:TextBox ID="txtUserId" runat="server" 
            onfocus="Focus(this.id,'insert date')"
                onblur="Blur(this.id,'insert date')" 
                Width="126px" CssClass="WaterMarkedTextBox">
                insert date
               </asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <asp:TextBox ID="txtPwd" TextMode="Password" runat="server" 
                        onfocus="Focus(this.id,'')"
                    onblur="Blur(this.id,'')" Width="126px" 
                      CssClass="WaterMarkedTextBoxPSW" />
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Submit" />
            </td>
        </tr>
    </table>
    </form>

this is actually a hidden table row that the default state is hidden
and then on imageButton click event(Codebehind)it’s made visible

   TRinsertForm.Style.Add("visibility", "visible");

so i guess that i could run a script form code behind that will generate javascript code that will set textbox initial text or somthing else.

Answer 1

this is what i came up with :

see html code in order to set it up as perfect alternating Watermark as i could come up with
using javascript and ajax methods combined

var original = "insert date";
var alternate = "mm/dd/yyyy";
var masked = "__/__/____";
var countalerted = 0;
var txt = "";
var intird = 0;
if (intird == 0) {
    intrId = setInterval(function () { alterWaterMarkForDateTBX() }, 1000);
}
function SetIntervalTBX() {
    setInterval(function () { alterWaterMarkForDateTBX() }, 1000);
}

function alterWaterMarkForDateTBX() {
    var d = new Date();
    var t = d.toLocaleTimeString();

    if (countalerted < 4) {
        if (countalerted % 2 == 0) {
            document.forms["form1"].elements["TBXinsertDate"].value = original;
        }
        else {
            document.forms["form1"].elements["TBXinsertDate"].value = alternate;
        }
        countalerted++;
    }
    else {
        window.status = intrId;
        clearInterval(intrId);
//        document.forms["form1"].elements["TBXinsertDate"].value = original;
    }
}




var wasFocused = false;var wasBlur = false;
function Focus(objname, waterMarkText) {
    wasFocused = true;
    if (wasBlur == false) {
        obj = document.getElementById(objname);
        if (obj.value == masked) {
            obj.value = ""; obj.removeAttribute("title");
            obj.className = "NormalTextBox";
            if (obj.value == original || obj.value == alternate || obj.value == "" || obj.value == null) {
                obj.style.color = "black";
            }
        }
    }
    else 
    {


            obj.value = "";

    }
}


function Blur(objname, waterMarkText) {


    var alternateWM1 = "insert date";
    var alternateWM2 = "mm/dd/yyyy";
    obj = document.getElementById(objname);

    if (obj.value == "" || obj.value == masked) {
        obj.value = waterMarkText;
        obj.className = "WaterMarkedTextBox";
        wasBlur = true;
    }
    else {
        obj.className = "NormalTextBox";
    }
    if (wasBlur == false) {
        if (obj.value == original || obj.value == alternate || obj.value == "" || obj.value == null ) {
            obj.style.color = "black";
            wasBlur = true;
            if (wasFocused == true) {
                SetIntervalTBX();
            }
        }
    }
}



         <asp:TextBox ID="TBXinsertDate" runat="server" ToolTip="insert date" 
        CssClass="WaterMarkedTextBox" Width="75px" OnTextChanged="TBXinsertDate_TextChanged" 
                 onfocus="Focus(this.id, this.value)"
                 onblur="Blur(this.id, this.value)" >
         </asp:TextBox>

         <cc1:TextBoxWatermarkExtender ID="insertDate_TextBoxWatermarkExtender" runat="server" TargetControlID="TBXinsertDate" WatermarkText="insert date" WatermarkCssClass="WaterMarkedTextBox">
                </cc1:TextBoxWatermarkExtender>