Question

首先请访问这个小提琴：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

但没有成功。如何解决？

感谢。

Answer 1

我想可能想看一下HTML5 placeholder属性。

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

Answer 2

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

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

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

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

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

Answer 3

另一种方法是使用内联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/

专注于每个文本输入在这里不起作用

3 个答案: