javascript - 交替/双模式 JavaScript 水印

Question

在下面的代码示例中，我将 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("月/日/年")

然后我找到了 ajax 的替代方案:javascriptWaterMark作者: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 单击事件(代码隐藏)上它变得可见

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

所以我想我可以在后面运行一个脚本表单代码，该代码将生成 javascript 代码，该代码将设置文本框初始文本或其他内容。

Answer 1

这就是我想到的:

请参阅 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>