交替/双模式JavaScript水印

时间:2012-10-03 01:21:32

标签: javascript asp.net-ajax asp.net-4.0 watermark

在下面的代码示例中,我将window.status从“a”替换为“b”

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

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

    window.status=txta;
    countalerted++;
}

我只是试图制作一个替代的Ajax水印 从“插入日期”到“mm / dd / yyyy”但是用javascript访问ajax太复杂了

set_Text("mm/dd/yyyy")

然后我找到了ajax的替代方案:{em> Md.Asaduzzaman Azad

我尝试在该代码上实现setInterval()

所以我将能够拥有一个整洁的双模式JavaScript-Watermark。

我知道它必须很简单,例如window.status备用代码的示例,但我无法弄清楚如何实现它。

的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>

这实际上是一个隐藏默认状态的隐藏表行 然后在imageButton点击事件(Codebehind)上它变得可见

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

所以我想我可以运行一个脚本表单代码,生成javascript代码,用于设置文本框初始文本或其他内容。

1 个答案:

答案 0 :(得分:0)

这就是我想出的:

请参阅html代码,以便将其设置为完美的交替水印,因为我可以想出来 使用javascript和ajax方法结合

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>