2012-05-10 63 views
1

如果在瀏覽器中可以使用以下html5或css 3功能,有什麼方法可以在javascript中檢測到嗎?有沒有什麼辦法可以在瀏覽器中檢測html功能

例如,我有一個屬性:佔位符,

<input type="text" placeholder="type your email address" /> 

我設置一個JavaScript功能,這將設置了手動佔位符,如果佔位符屬性不是由瀏覽器


支持如果我使用Modernizr,會這樣做:

if (Modernizr.testProp('placeholder')) 
// add attribute placeholder 
else 
// assign a keypress event as placefolder 

回答

4

對於簡單的情況就是這樣,你可以直接做的事情,而不涉及的Modernizr:

<input type="text" placeholder="type your email address" 
    id="email"> 
<script>  
var email = document.getElementById('email'); 
if(!('placeholder' in email)) { 
    email.value = email.getAttribute('placeholder'); 
    email.onfocus = function() { this.value = ''; }; 
} 
</script> 

在這種方法中,placeholder屬性出現在靜態的HTML標記。不支持時不會造成傷害;事實上,如果不支持,它甚至可以是有用的。

問題是,當支持placeholder時,元素節點存在具有該名稱的屬性。即使不支持,瀏覽器也會解析並存儲它,以便您可以通過getAttribute()獲取該值,並將該值分配給value屬性,以使其顯示爲初始內容。

該代碼在關注時清除該字段。這聽起來比單擊時清除它好,因爲用戶在輸入部分數據後可能出於多種原因點擊該字段。

P.S.爲了可用性,可訪問性和簡單性,最好對每個輸入字段使用可見標籤,而不是使用佔位符。所以這不像一個好的用例。但是可以使用相同的技術,例如用於網站通常作爲站點導航系統的一部分的非常簡單的搜索表單;那麼將表單擠壓成非常小的尺寸,可以省略標籤。

+1

1+這是一個更好的方式來測試你的問題然後modernizer(IF)你並沒有將它用於其他事情。更少的外部文件和更快的網站 – atmd

+0

感謝您的意見,但佔位符只是一個例子,我使用這個鏈接,[鏈接] http://miketaylr.com/code/input-type-attr.html,無論如何,我想你是對的,我可以隨處使用這些條件 –

2

使用Modernizr您的所有功能檢測需求

+0

我知道什麼,我必須使用在modernizer,這是我需要知道如何,我已經更新了我的問題 –

相關問題