首頁 > web前端 > css教學 > 主體

如何在 Chrome 中自動隱藏焦點上的佔位符文字?

Patricia Arquette
發布: 2024-11-12 03:01:02
原創
811 人瀏覽過

How Do I Auto-Hide Placeholder Text on Focus in Chrome?

自動隱藏焦點上的佔位符文字

網路瀏覽器自動化簡化了焦點上佔位符文字的隱藏,但這種便利性有一個例外: 鉻合金。針對這個特定的瀏覽器,必須實作特定的解決方案。

CSS 方法:

input:focus::placeholder {
  color: transparent;
}
登入後複製

此 CSS 規則將佔位符文字設定為焦點時透明,有效地使它是不可見的。

jQuery方法:

<input type="text" placeholder="Type something here!">
登入後複製
 $("#myInput").focus(function() {
   $(this).attr("placeholder", "");
 });
登入後複製

jQuery 程式碼會在輸入欄位獲得焦點時刪除佔位符文本,並在失去焦點時恢復它。

注意:

最初,這種方法被認為是Chrome 瀏覽器獨有的,但現代瀏覽器現在支援input::placeholder 選擇器,使CSS和jQuery 方法適用於所有瀏覽器。

以上是如何在 Chrome 中自動隱藏焦點上的佔位符文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板