1

首先请访问这个小提琴：http: //jsfiddle.net/asif097/z6zsc

我希望的是，这个 jquery 代码将为每个文本输入单独运行该类。此时此代码同时在两个文本输入字段上运行。

这是我的 Jquery 代码：

$(".first-name-input").after("<div class='first-name-input-value'>First Name</div>");

    $(".first-name-input").focus(function(){
        $(".first-name-input-value").hide();
    });

    $(".first-name-input").blur(function(){
        if($(this).val() == ""){
            $(".first-name-input-value").show();
        }

    });

    $(".first-name-input-value").click(function(){
        $(".first-name-input").focus();
    });

我也试过这个：http: //jsfiddle.net/z6zsc/1

但没有成功。如何解决？

谢谢。

4

3 回答 3

2

我想可能想看看 HTML5placeholder属性。

http://jsfiddle.net/NWLes/

<input type="text" class="first-name-input" placeholder="First Name" required="required"/>

或修复您的代码：- http://jsfiddle.net/vYtmC/

$(".first-name-input").after("<div class='first-name-input-value'>First Name</div>");
    $(".first-name-input").focus(function(){
        $(this).next().hide();
    });
    $(".first-name-input").blur(function(){
        if($(this).val() == ""){
            $(this).next().show();
        }

    });
    $(".first-name-input-value").click(function(){
         $(this).prev().focus();
    });
于 2013-04-29T04:49:13.627 回答
1

在您的事件处理程序中，您需要引用$(this)以便处理程序仅对触发事件的对象进行操作，而不是对所有对象进行操作。

由于您正在尝试对另一个相邻元素进行操作，因此您需要找到与该元素相关的其他this元素。

由于.first-name-input-value对象就在first-name-input对象之后，您可以使用以下命令：

$(".first-name-input").focus(function(){
    $(this).next().hide();
});

仅供参考，因为您实际上是在尝试实现 HTML5 占位符功能，您也可以为 HTML5 占位符获取一个预先编写的 shim 并使用它。这个问题已经解决了很多次了。你不必重新发明它。我相信正确的 Google 搜索会为您找到几个预先编写的选项。

于 2013-04-29T04:44:00.573 回答
0

另一种方法是为您的输入元素使用内联 javascript。你也可以分解成一个单独的函数调用......

您更新的 html 将是这样的：

<input id="first_name" name="first_name" type="text" size="25" placeholder="First Name"
            onfocus="if (this.value == 'First') { this.value = ''; this.style.color = '#000000'; } " 
            onblur="if (this.value == '') { this.value = 'First'; this.style.color = '#909090'; } " 
            value="First"/>

这将达到您想要的效果，并且每个输入都可以单独使用......

这是一个更新的小提琴- http://jsfiddle.net/z6zsc/8/

于 2013-04-29T04:55:05.600 回答