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;
    }

谢谢和问候， Sagar的

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中非常强大且实用的工具。

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

removeTextWhenClicked

...由于您不需要将任何数据绑定到该数据，您仍然可以像原来一样直接使用它。

您的function removeTextWhenClicked() { this.value = ""; }处理程序变化多了，因此您可能需要将数据绑定到它们。或者，您可以使整个事情由标记驱动：

blur

请注意新的<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

自{+ 1}}等自定义属性在HTML4及更早版本中无效（虽然我从未见过禁止浏览器的浏览器），因此标记不会以{{3}验证}}。从HTML5开始，以function removeTextWhenBlur() { if (this.value == "") { this.value = this.getAttribute("data-msg"); } else { this.style.color = "#333333"; } }开头的自定义属性有效。因此，如果您不在开发过程中使用验证[验证是一件好事（tm）]，或者如果您使用HTML5文档类型，则可以继续使用它们。

现在，属性可能不适合您。它们对于大型团队非常有用，其中执行标记的人员与执行代码的人员不同，因此保持相当分离的事物非常重要。但是，另一种方法是通过ID将消息映射到元素。使用原始标记，这些功能可以这样工作：

data-msg

偏离主题＃1 ：

我可能会将data-更改为：

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";
    }
}

非主题＃2 ：

使用validation tools，jQuery，Prototype，YUI或Closure等JavaScript库非常值得。它们可以消除浏览器实现之间的差异，提供有用的实用功能，并且通常可以为您节省更多的时间。

非主题＃3 ：

您正在使用的处理程序分配方法，分配给名为removeTextWhenClicked的属性等，称为“DOM0”方法。这是相当老式和限制性的。值得看看更新的“DOM2”方式，即function removeTextWhenClicked() { if (this.value == placeholders[this.id]) { this.value = ""; } this.style.color = ''; // In case we colored it earlier }，尽管遗憾的是它在IE上是onclick。（任何JavaScript库都将提供一个包装器来处理它。）DOM2处理程序的一个优点是可以为同一元素上的同一事件设置多个处理程序，而使用DOM0机制，分配一个新的处理程序bludgeons（删除））以前任何一个。

Answer 2

与被调用函数关联的对象将分配给this关键字。尝试：

function removeTextWhenBlur(chk)
{
    alert(this.id);
...

圣诞快乐！

Answer 3

您可以将函数调用包装在匿名函数中，如下所示：

window.onload = function(){

    document.getElementById("searchfield").onclick = function(){removeTextWhenClicked(1);};
    document.getElementById("searchfield").onblur =  function(){removeTextWhenBlur(1);};
    document.getElementById("searchfield2").onclick =  function(){removeTextWhenClicked(2);};
    document.getElementById("searchfield2").onblur =  function(){removeTextWhenBlur(2);};
    }

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

3 个答案: