前言介紹
- 這款 WordPress 外掛「Gravity Forms Placeholder Add-On」是 2014-01-30 上架。
- 目前有 2000 個安裝啟用數。
- 上一次更新是 2017-11-28,距離現在已有 2713 天。超過一年沒更新,安裝要確認版本是否可用。以及後續維護問題!
- 外掛最低要求 WordPress 3.6 以上版本才可以安裝。
- 有 12 人給過評分。
- 還沒有人在論壇上發問,可能目前使用數不多,還沒有什麼大問題。
外掛協作開發者
外掛標籤
內容簡介
注意
該外掛基於最初由neojp開發的支援佔位符插件,可在下面的連結中找到。 主要的區別在於我們為下拉字段添加了支援。
https://wordpress.org/plugins/gravity-forms-placeholders/
此外掛提供佔位符支援給Gravity Forms WordPress外掛。
要使用此外掛,您只需將“gf-add-placeholder”類添加到您希望具有佔位符的任何字段中即可。
插件將使用標籤文本,隱藏該標籤,並將標籤文本應用於佔位符屬性。
如果您想在整個表單中使用此外掛,則只需將“gf-add-placeholder”類添加到表單本身中,然後它將應用於所有表單元素。
下拉字段
如您所知,HTML中的選擇字段沒有本機佔位符屬性。現在您可以做一些事情,只需添加說“請選擇”的選項,但我認為這不是最好的方法。
此外掛對於下拉字段提供佔位符的LIKE支援,做法如下:
它像處理其他字段一樣隱藏標籤,但然後將標籤文本作為選項的值加入到下拉字段中,並添加了selected和disabled屬性。 確保該選項已被選擇,並確保一旦用戶點擊了這個字段,他們就不能選擇並提交該選項。
將來我完全打算添加選項,使隱藏標籤能夠選擇,並且您能夠手動設置您的佔位符文本,而不僅僅是將標籤文本拉入。
此外掛需要JavaScript和JQuery來運作,並測試至WordPress版本3.8.1和Gravity Forms版本1.8。
享受!祝您編程愉快:)
原文外掛簡介
NOTE
The plugin is based off of the placeholder support add-on initially developed by neojp and can be found at the link below. The main
difference being that we added support for drop-down fields.
This plugin gives support for placeholders to the Gravity Forms WordPress Plugin.
In order to use the plugin you need only add the class of \”gf-add-placeholder\” to any of the fields you wish to have a placeholder on.
The plugin will take the text of the label and then hide said label and apply the text from the label to the placeholder attribute.
If you would like to to use this on your entire form then you need only add the \”gf-add-placeholder\” class to the form itself and then it will be applied to all the form elements.
DROPDOWN FIELDS
As im sure you know, the select field in HTML does not have a native placeholder attribute. Now you can do what some do and just add an option that says \”please select\” but that is not (in my opinion) the best way.
This plugin does the following to give a placeholder LIKE support to the select fields
It takes and hides the label just like it does with the other fields but then it takes the text from that label and prepends an option to the select field that contains the text from the label as it\’s value and it also adds a selected and disabled attribute to the option. Ensuring that it is selected and also ensuring that once a user clicks into the field that they wont be able to select and submit with that option.
In the future i fully intend on adding features that will allow the hiding of labels to be optional and the feature for you to be able to manually set your placeholder text as opposed to it just pulling in the label text.
The plugin requires Javascript and Jquery to function and is tested up to WordPress version 3.8.1 and Gravity Forms Version 1.8
ENJOY! and happy coding 🙂
各版本下載點
- 方法一:點下方版本號的連結下載 ZIP 檔案後,登入網站後台左側選單「外掛」的「安裝外掛」,然後選擇上方的「上傳外掛」,把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二:透過「安裝外掛」的畫面右方搜尋功能,搜尋外掛名稱「Gravity Forms Placeholder Add-On」來進行安裝。
(建議使用方法二,確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛(你可能也想知道)
Generate Dummy Posts 》使用 Generate Dummy Posts 外掛程式,您可以輕鬆地在一個按鈕點擊中創建虛擬文章。開發人員和設計師通常使用虛擬文本來創建或開發部落格式 WordPress 網站,...。
Gravity Forms Auto Placeholders 》此外掛自動將所有Gravity表單標籤轉換為HTML5占位符。同時包含Modernizr,以添加IE瀏覽器的占位符支援。。
Lorem Ipsum Block – Placeholders for everyone 》, 只需在空段落區域中輸入 lorem 然後按下鍵盤上的 Return 鍵。, 輸入 lorem 將觸發自動完成器。然後,您可以繼續從下面的列表中輸入單詞、關鍵詞或單詞部分...。
Search Placeholder Avada 》自訂搜尋欄位提示文字!, Search Placeholder Avada 可以讓您在 Avada 的搜尋欄位加入自己的提示文字。, 現在已支援所有 WordPress 佈景主題。, 使用方法, Se...。
Dummy Images 》Dummy Images 提供產生圖片占位符功能,可用於多種用途 - 設定臨時特色圖片,填補空白位子,測試和試算不同的圖片尺寸等等。, 此外,此外掛不僅提供產生空白...。
Lorem Ipsum Blocks 》這個外掛為一些核心區塊添加了變體,並使得使用帶有虛擬文字和虛擬圖片的區塊非常容易。, 由於它只是添加了核心块的“變體”,所以非常輕量級。, 可用區塊, , ...。
Placehold (Gravity Forms) 》這個外掛在您的Gravity Forms輸入欄位中添加了一個佔位符號字段,並將其顯示為一個合適的 HTML5 佔位符號屬性,無需 JavaScript(耶!), 我從wpbeginner.com...。
GR Lorem Ipsum Generator 》該外掛可以透過 shortcode 隨機生成一個或多個 Lorem Ipsum 文字段落。使用 [lorem] shortcode 生成一個段落。或加入 para= X 來生成 X 個段落。例如,使用 [...。
PlaceHodor 》這個外掛可以使用預設圖片替代/取代缺失的圖片。, 該外掛會(嘗試)顯示/生成缺失圖片的適當大小(寬度和高度)。, 您可以選擇在 Placehodor 設定頁面上上傳...。
Contact Form 7 Quiz Placeholders 》自動將 Contact Form 7 測驗標籤轉換為 HTML5 占位符(類似於 CF7 中的「水印」功能,但對於測驗缺失)。包括 Modernizr 以在 Internet Explorer 中添加占位...。
Lorem Ipsum Autocompleter 》```html,
- ,
- 這個 Lorem Ipsum Autocompleter 外掛讓您可以通過自動完成功能快速將佔位文本插入 WordPress 的文章和頁面中。只需在區塊編...。
String-Override 》String Override 可以在管理面板中用您指定的文本替換文本。這是一個非常簡單且非常有用的外掛,可以使主題更易於更新和維護。, 此外掛在模板檔案中,以及文...。
Placeholder it 》這個外掛包含一個小工具,可用於在你還需要進一步開發的小工具區域上顯示占位符。它使用「www.placehold.it」的 Web 服務來生成圖像。, 這個外掛非常有用,如...。
Placeholder Text 》這個外掛可以讓不支援 HTML5 的瀏覽器(包括 Internet Explorer 6)使用 placeholder 屬性。這個外掛只需要啟用 James Allardice 的 placeholders.js 腳本。...。
Custom Lorem Ipsum Generator 》根據單字數量生成 Lorem Ipsum 占位符。 您可以使用 [lorem words=XXX] 快捷方式生成特定數量的詞語。例如:如果您想生成包含 300 個單詞的占位符,您可以使...。