jQuery字段默認文本焦點前的文本區域

如何讓jquery有一個'textarea'像'輸入'框包含默認消息。我對jQuery非常陌生，似乎無法弄清楚這一點。我很抱歉要問這個問題。jQuery字段默認文本焦點前的文本區域

我已經做了很多研究，希望將非常簡單的jQuery功能整合到一個網站中。我真的試圖限制額外的js腳印到最小的腳本。不大的插件腳本。在我的研究中，我發現了很多幫助。

我有幾個自定義搜索查詢，我儘可能接近我的工作能力。使用這些小型搜索框，我會使用一個小腳本將「輸入」的內容替換爲「搜索...」之類的自定義消息，直到框中有人（焦點）類型。這個小腳本的作品非常漂亮。但我也希望相同的腳本在評論區域也做同樣的事情。

$('#outputList, #outputList2').removeClass('no-display'); 
$(document).on("blur", "#inputBox, #inputBox2, #commentArea", function(){ 
    var default_value = $(this).attr("rel"); 
    if ($(this).val() === ""){ 
     $(this).val(default_value); 
    } 
}).on("focus", "#inputBox, #inputBox2, #commentArea", function(){ 
    var default_value = $(this).attr("rel"); 
    if ($(this).val() === default_value){ 
     $(this).val(""); 
    } 
});

基本的html如下。對於評論中...

<textarea name="comment" id="commentArea" class="input-block-level" rows="6" rel="Leave a Comment…"></textarea><!--text between the text areas tags does not get removed -->

對於搜索框......

<input type="text" id="inputBox" value="Search for..." rel="Search for..." /> 
<ul id="outputList" class="align-left no-display"> 
    <!-- list to be filtered --> 
</ul> 

<input type="text" id="inputBox2" value="Search for..." rel="Search for..." /> 
<ul id="outputList2" class="align-left no-display"> 
    <!-- list to be filtered --> 
</ul>

正如蜜蜂在這裏看到我的jsFiddle。即時加載搜索框的值字段爲默認值。失去焦點轉到rel領域。

textarea在失去焦點時獲得rel字段，但不能用值字段開始。

我知道通過HTML的佔位符，但我希望它具有與搜索框相同的格式，並以相同的方式進行操作。這可能嗎？

我已經搜索並找到了很多答案，但似乎沒有得到評論框有deafult領域工作負載。預先感謝您的幫助和時間。

我正在運行以下，如果它有幫助。 Wordpress 3.5.1，jQuery 1.9.1，jQuery UI 1.9，php 5.4和MySql Ver 14.14 Distrib 5.5.30。

來源

2013-04-25 Pelligea

沒有什麼可以放置初始textarea值;似乎工作正常。 http://jsfiddle.net/ehwRU/4/ – 2013-04-25 03:27:20

更新&簡化您的撥弄了一下：http://jsfiddle.net/ehwRU/3/

$("#inputBox, #inputBox2, #commentArea").each(function() {  

    var default_value = $(this).attr("rel"); 

    $(this).val(default_value) 

     .blur(function() { 
      if (!$(this).val().length) $(this).val(default_value); 
     }) 

     .focus(function() { 
      if ($(this).val() === default_value) $(this).val(""); 
     }); 
});

似乎目前預計工作嗎？

來源

2013-04-25 03:26:35 loxxy

非常感謝。我確實嘗試使用佔位符值。但是，當搜索框獲得焦點時，文本一直存在，直到有人開始輸入。我希望在重點關注更多視覺重點時刪除默認值。大家的幫助非常感謝。我不知道爲什麼我的一個橢圓格式正確，另一個不正確。當我將濃縮的文檔複製到textarea時，它也起作用了。非常感謝。 – Pelligea 2013-04-25 03:47:09

似乎對我很好，您可能錯誤輸入了省略號或者有不必要的空格。您可能需要修剪default_value進行比較。

而不是rel你可能想要使用placeholder，這將在現代瀏覽器中沒有JS工作。

http://jsfiddle.net/ehwRU/1/

來源

2013-04-25 03:14:34

一讀到標題，我就想到了'placeholder'屬性。 – 2013-04-25 03:15:35

哇，我現在感覺很可怕，但是當我輸入橢圓時，我會得到'...'而不是你所擁有的，這似乎將它們凝聚成三個更接近的點。以及我在rel領域所擁有的。我想給出更多的視覺強調，該框具有焦點比佔位符。除非我錯過鍵入不在焦點上的東西，否則它會消失。 – Pelligea 2013-04-25 03:26:13

jQuery字段默認文本焦點前的文本區域

回答

相關問題