專注於每個文本輸入在這里不起作用

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/