使用jQuery在文本字段內淡出文本值

我不完全確定這是否可行，但對於jQuery和JavaScript來說，我非常瞭解，但是這個讓我難以理解。我創建了一個簡單的插件，用於清除焦點上的文本輸入，然後在沒有輸入任何內容時顯示默認值。使用jQuery在文本字段內淡出文本值

是否可以淡出文本輸入中的文本本身，而不是整個字段本身？所有的嘗試似乎都會導致文本字段本身淡出並最終隱藏元素。

我想出了一個使用跨度的解決方案，其中包含默認值，並絕對將它們放置在文本輸入上，隱藏和顯示它們，具體取決於用戶是否輸入了任何文本。如果存在的話，我寧願採用一種非常簡單的方法。

編輯

使用jQuery動畫功能，這是jQuery用戶界面或可作爲jQuery的一個插件，可以在聚焦與該領域的模糊動畫文本顏色設置爲輸入的顏色（如下所示）。這是我使用的代碼，以防你想知道如何。

obj.bind("focus", function() { 
    if ($(this).val() == oldValue) { 
     $(this).animate({ color: '#E8DFCC' }, 1000).val(''); 
    } 
}); 

obj.bind("blur", function() { 
    if ($(this).val().length <= 3) { 
     $(this).animate({ color: '#56361E' }, 600).val(oldValue); 
    } 
});

來源

2010-06-18 Dwayne Charrington

您已經在這裏確定了最好的跨瀏覽器解決方案，位於頂部的元素，不確定您是否仍然可以在任何地方工作而改進它。 – 2010-06-18 00:06:18

只是一個快速的思想，你嘗試過用動畫的方法來改變文本框，讓背景的文本的顏色？然後當動畫完成時，您可以清除內容。

它的一個想法。自從我使用動畫的東西以來，它已經有一段時間了，但如果您有興趣，我可能會掀起一個代碼示例。

來源

2010-06-18 00:08:05 ckramer

非常感謝您的建議。我應該寫一些動畫代碼是正確的，我很熟悉它，儘管很少用它來試用它。我會報告我如何去，但我認爲它會起作用。 – 2010-06-18 00:12:13

簡單但優雅的解決方案。 jQuery不支持彩色動畫，但如果你有jQuery UI，你可以做彩色動畫，否則還有一個彩色動畫插件可以下載。我更新了我的問題，以反映我使用的代碼，以防別人想知道如何去做。 – 2010-06-18 00:18:25

太棒了，我沒有機會對它進行測試（在我的漏洞修復修補程序之間爭論兒童），所以我很高興它能夠工作（使用jQuery UI）。 – ckramer 2010-06-18 00:20:53

這就是我正是用這個。第一添加到您的JavaScript包括： http://plugins.jquery.com/project/color

然後做到這一點：

$('.search-input').focus(function(){ 
    if($(this).val() == 'Default Text'){ 
     $(this).animate({ 
      color: '#fff' 
      //your input background color. 
     }, 500, 'linear', function(){ 
      $(this).val('').css('color','#000'); 
      //this is done so that when you start typing, you see the text again :P 
     }); 
    } 
}).blur(function(){ 
    if($(this).val() == ''){ 
     $(this).val('Default Text').css('color','#fff'); 
     $(this).animate({ 
      color: '#000' 
     }, 500, 'linear'); 
    } 
});

這是什麼會做的是褪色的文字的背景色，然後清空輸入字段。並在模糊狀態下先顯示默認文字，然後淡化爲原始顏色。

一種錯覺:)

可以免去很多的這個，如果你不希望真正清除該字段。但你明白了。這裏的關鍵是兩件事。使用顏色插件和.animate（）效果。

來源

2010-06-18 01:03:02 Jubair

我剛碰到這個問題，我的解決方法很簡單，只需將屬性「value」更改爲「'即可。這基本上會用什麼都替代文本。

$(selector).attr('value', '');

來源

2012-03-09 15:55:58 Brett

這只是刪除字段中的文本，而不是平穩淡出。請注意，'$（selector）.val（「」）;'更短。 – Aletheios 2012-10-28 15:27:02

這種工作：.fadeOut（）.val（「new value」）.fadeIn（），但整個輸入字段消失，這是醜陋的。 – 2013-11-08 00:18:16

使用jQuery在文本字段內淡出文本值

回答

相關問題