javascript - 检测点击和模糊时的输入，并使用不显眼的 javascript 将值传递给函数

Question

我在使用无障碍 JavaScript 检查哪个输入已被单击时遇到问题。我知道通过直接将其写入输入标记来从函数传递值的方法，但我想知道如何从 javascript 文件传递​​值。截至目前，向对象添加事件只是调用函数，但无法发送任何值

下面是html

    <input id="searchfield" name="searchfield" type="text" value="Your e-mail address" />
<br />
<input id="searchfield2" name="searchfield2" type="text" value="Your password" />

和同样的js代码我希望你能帮助我。

// JavaScript Document
    function removeTextWhenClicked(chk)
    {
        if(chk == 1)
        {
            document.getElementById("searchfield").value = "";
        }
        else if(chk == 2)
        {
            document.getElementById("searchfield2").value = "";
        }
    }
    function removeTextWhenBlur(chk)
    {

        if(chk == 1)
        {
            if(document.getElementById("searchfield").value == "")
            {
                document.getElementById("searchfield").value = "please enter username";
            }
            else
            {
                document.getElementById("searchfield").style.color = "#333333";
            }
        }
        else if(chk == 2)
        {
            if(document.getElementById("searchfield2").value == "")
            {
                document.getElementById("searchfield2").value = "please enter password";
            }
            else
            {
                document.getElementById("searchfield2").style.color = "#333333";
            }
        }
    }
    window.onload = function(){

    document.getElementById("searchfield").onclick = removeTextWhenClicked;
    document.getElementById("searchfield").onblur = removeTextWhenBlur;
    document.getElementById("searchfield2").onclick = removeTextWhenClicked;
    document.getElementById("searchfield2").onblur = removeTextWhenBlur;
    }

感谢和问候， 萨加尔

Answer 1

您实际提出的问题的答案是，您可以通过将数据构建到闭包中来实现，然后使用闭包作为处理程序:

document.getElementById("searchfield").onclick = buildHandler(removeTextWhenClicked, 1);
document.getElementById("searchfield2").onclick = buildHandler(removeTextWhenClicked, 2);

...其中 buildHandler 如下所示:

function buildHandler(callback, arg) {
    return function() {
        return callback(arg);
    };
}

More about closures here ，它们是 JavaScript 中非常强大且有用的工具。

但是，在您的具体情况下，您不需要这样做，因为您传递到函数中的唯一信息是确定您正在处理哪个元素的方法，并且您已经拥有了:这个。在事件处理程序中，this 将指向您设置处理程序的元素。例如，removeTextWhenClicked 可以是:

function removeTextWhenClicked()
{
    this.value = "";
}

...由于您不需要为其绑定(bind)任何数据，因此您仍然可以像原来一样直接使用它。

您的 blur 处理程序变化较多，因此您可能需要将数据绑定(bind)到它们。或者，您可以使整个事情由标记驱动:

<input id="searchfield" name="searchfield" type="text" data-msg="please enter username" value="Your e-mail address" />
<br />
<input id="searchfield2" name="searchfield2" type="text" data-msg="please enter password" value="Your password" />

注意新的 data-img 属性。现在您的 removeTextWhenBlur 变为:

function removeTextWhenBlur()
{
    if (this.value == "")
    {
        this.value = this.getAttribute("data-msg");
    }
    else
    {
        this.style.color = "#333333";
    }
}

像 data-msg 这样的自定义属性在 HTML4 及更早版本中是无效(尽管我从未见过不允许它们的浏览器)，因此标记不会使用 validation tools 进行验证。从 HTML5 开始，以 data- 开头的自定义属性是有效的。因此，如果您不使用验证作为开发过程的一部分 [验证是一件好事(tm)]，或者如果您使用 HTML5 文档类型，那么您现在就可以继续使用它们。

现在，属性可能不适合您。它们在大型团队中非常有用，在大型团队中，进行标记的人员与编写代码的人员不同，因此保持事物的相当解耦很重要。不过，另一种方法是通过 ID 将消息映射到元素。使用您的原始标记，这些函数可以像这样工作:

var placeholders = {
    "searchfield":  "please enter username",
    "searchfield2": "please enter password"
};

function removeTextWhenClicked()
{
    this.value = "";
}
function removeTextWhenBlur()
{
    if (this.value == "")
    {
        this.value = placeholders[this.id];
    }
    else
    {
        this.style.color = "#333333";
    }
}

<小时/>

离题#1:

我可能会将 removeTextWhenClicked 更改为:

function removeTextWhenClicked()
{
    if (this.value == placeholders[this.id])
    {
        this.value = "";
    }
    this.style.color = ''; // In case we colored it earlier
}

离题#2:

使用像 jQuery 这样的 JavaScript 库是非常值得的。 , Prototype , YUI , Closure ，或any of several others 。它们消除了浏览器实现之间的差异，提供有用的实用功能，并且通常为您节省的时间比它们消耗的时间还要多。

离题#3:

您正在使用的处理程序分配方法(分配给名为 onclick 的属性等)称为“DOM0”方法。这是相当老式的和限制性的。值得一看的是较新的“DOM2”方法，即 addEventListener，尽管遗憾的是它在 IE 上是 attachEvent。 (任何 JavaScript 库都会提供一个包装器来处理这一问题。)DOM2 处理程序的一个优点是，可以为同一元素上的同一事件设置多个处理程序，而使用 DOM0 机制，可以分配一个新的处理程序大棒(删除)任何以前的。