使輸入文本透明的簡單方法

Question

我知道我可以通過指定value屬性來創建帶有默認文本的輸入表單，但是我該如何使它在視覺上透明並在單擊時消失呢？ 我想使我的文本字段像Twitter那樣 。

我發現的所有資源似乎都過於復雜，我希望這就像設置一些屬性一樣簡單，但是我只是不知道要設置哪些屬性。 我嘗試在chrome開發工具中查看twitters的源代碼，但找不到該代碼使它們能夠使用單擊時消失的透明文本。

Answer 1

您可以對HTML5支持的瀏覽器使用placeholder屬性。 例如：

<input type="text" placeholder="First name">

對於舊的瀏覽器，實現不是一件容易的事。 請查看以下問題：

• 如何在考慮向后兼容性的情況下使用HTML5占位符屬性？
• 適用於舊瀏覽器的真正占位符文本修復程序？
• 在本機不支持“占位符”屬性的瀏覽器中，最准確的方法是什么？

Answer 2

嘗試占位符屬性：

<input type="text" placeholder="Name">