在空輸入字段中顯示佔位符文本

在onfocus期間（在輸入字段上）輸入默認值如何被禁用，但在輸入字段上可以寫入任何類似默認值的字符不存在？在空輸入字段中顯示佔位符文本

這裏是簡單的HTML =>

<input type="text" id="x">

和javascript =>

document.getElementById("x").onfocus = function(){ 
this.style.opacity = 0.5; 
}

，但我不能做我想做的。

來源

2012-07-10 tnanoba

http://whathaveyoutried.com/ – Amaerth 2012-07-10 21:18:22

我已經嘗試了很多，你知道，只是不寫，因爲它確實非常簡單，但無法解決它。我會更新我的問題，並請幫助，如果你可以 – tnanoba 2012-07-10 21:20:08

隨着「HTML5」，新的功能和屬性已經被引入用於形元素（如內置形式驗證例如）

其中之一是placeholder - 屬性。它會在用戶開始填充字段中的文本後，在空輸入字段中顯示指定的文本，這些字段將被隱藏。的HTML的標記看起來是這樣的：

<input type="text" name="first_name" placeholder="Fill in your name">

這個功能不是所有的瀏覽器都支持，但（你可以檢查兼容性上caniuse.com

在你的代碼，你可以檢查一個簡單的功能兼容性：

var placeHolderSupport = ('placeholder' in document.createElement('input'));

對於舊的瀏覽器，你需要編寫一個備用的JavaScript - 功能，讀取此屬性和執行行爲yourselve大約有一些這方面的博客，帖子在網絡上，像一個從David Walsh，這可以幫助你。

編輯：

我偶然發現了這個gist由Hagenburger（according blog-post），應該實現你要實現對舊的瀏覽器太的行爲。注意：它是jQuery代碼，不知道你是否使用它，但即使不是，它應該給你一個想法，該怎麼做。

因此，考慮到兼容性 - 從上面檢查：

if(!placeHolderSupport){ 
    //gist code here (not sure if i'm allowed to copy this into my answer) 
}

這樣，本機佔位符，實現在瀏覽器將被使用，如果它存在，否則，JavaScript的功能會照顧這個。

更新2012年9月11日

SO-用戶和主持人ThiefMaster剛剛指出的馬蒂亞斯Bynens，已經內置了檢查placeholder更好更新的jQuery的插件 - 支持。當然更好的辦法來實現佔位符，回退比我張貼的要點：

jQuery Placeholder at github

來源

2012-07-10 21:25:12 GNi33

好吧把... i ++; – 2012-07-10 21:27:02

<input type="text" value="blah" name="Email" 
id="Email" onblur="this.value = 'blah';" 
onfocus="this.value = 'blah';" />

來源

2012-07-10 21:24:19 Vinit

我知道這一點，但你不能很好地解決這個問題，解釋我的意思就像它是在Facebook的搜索領域，當輸入是聚焦默認文本變得暗淡和被看到但光標的指針是在輸入的開頭 – tnanoba 2012-07-10 21:26:18

得到了它...你正在尋找http://code.google.com/p/jquery-watermark/ – Vinit 2012-07-10 21:28:16

<input type="text" data-placeholder="Name" /> 


$(function(){ 
    $('input').each(function(){ 
    if($(this).val() == ''){ 
     $(this).val($(this).data('placeholder')); 
    } 
}); 

}); 
$('input').focusin(function(){ 
    if($(this).val() == $(this).data('placeholder')){ 
     $(this).val(''); 
    } 
}).focusout(function(){  
    if($(this).val().length < 0){ 
     $(this).val($(this).data('placeholder')); 
    } 
});

見例如快速和骯髒example here。

來源

2012-07-11 12:40:20

在空輸入字段中顯示佔位符文本

回答

相關問題