什麼是使文本輸入字段顯示以灰色輸入該字段內容的指令的最佳方式是什麼？當您專注於該輸入字段時，灰色說明文字消失，輸入文字顯示爲黑色。如果刪除輸入文本並將注意力從該輸入中移開，則會再次顯示指令灰色文本。顯示指令（佔位符）文本的Javascript文本輸入字段

我試過用jQuery實現這一點，但我用不同的瀏覽器得到各種奇怪的問題。有時當你回到屏幕上時，說明文字變黑，不再消失，像這樣的問題。

這是否有一個標準的JavaScript庫？我找不到任何東西！

噢，指令文本不能是圖像，因爲它必須根據瀏覽器的語言偏好以不同的語言提供。

來源

2010-08-10 at.

您可以使用水印插件在jquery.use this鏈接。

例如

$(this).Watermark("your instructions");

來源

2010-08-10 05:29:07

這是完美的，謝謝！ – 2010-09-07 06:11:49

-2

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''">

來源

2010-08-10 05:27:17 ppshein

這錯過的問題的需求最多，具有可訪問性問題。 – Quentin 2010-08-10 05:29:35

這不起作用。因爲在你專注於這個領域之後，說明文字永遠消失 – 2010-08-10 05:30:15

對不起，夥計們。我雖然錯誤的方式。 – ppshein 2010-08-10 05:32:51

使輸入變爲透明並將文本放在後面。檢查onload值，onblur以決定文本是否可見。讓它在焦點上隱形。

例如：http://dorward.me.uk/tmp/label-work/example.html（你只需要樣式標籤和輸入不同的前景顏色）

來源

2010-08-10 05:27:30 Quentin

我喜歡這個想法。指令文本也是可索引的，這是有道理的。我使用jQuery水印插件，因爲它非常簡單，並且使得html非常乾淨。就我所知，他們用相同的機制實現了這一點。 – 2010-09-07 06:13:11

HTML

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox">

jQuery的

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    }); 
});

demo

來源

2010-08-10 05:35:38 Reigel

看這一個：http://fuelyourcoding.com/scripts/infield/

來源

2010-09-06 22:19:05

愛褪色！也許我會在稍後看看 – 2010-09-07 06:14:53

這個你不需要javascript。

HTML5：

<input type="text" id="email" name="email" placeholder="Enter your email address">

這工作在現代瀏覽器。如果您將modernizr.js添加到您的頁面，那麼它將適用於所有瀏覽器。

來源

2011-08-19 13:53:03 autonomatt

據我所知，modernizr只檢測當前瀏覽器中是否存在像佔位符這樣的html5功能。您需要提供回退機制。上面我選擇的jQuery庫實際上使用了html5的佔位符屬性（如果你想要的話）並回退到他們的javascript機制。 – 2011-08-19 16:43:16

佔位符碼 - 變量的名稱

名字，

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
});

DEMO LINK

來源

2012-06-11 06:19:45 ShivarajRH

顯示指令（佔位符）文本的Javascript文本輸入字段

回答

HTML

jQuery的

demo

相關問題