2017年9月1日 星期五

自動記憶表單狀態,重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus

自動記憶表單狀態,重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus

Wayne Fu 0 A+
form-remember-status-sisyphus-自動記憶表單狀態,重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus曾製作過不少線上工具,大多需要用表單的形式讓使用者輸入資料。其中「圖片 ALT 描述自動產生器」用到大量表單元件,有單選、多選、文字輸入等各種形式。

只要常常發佈部落格文章的話,這個工具每次都會用到,那麼表單勾選的狀態、或輸入的文字必須儲存起來,下次使用才不會麻煩,可避免重複勾選及輸入。

以前儲存表單狀態是用 cookie 來寫入,但程式寫起來不方便,且前陣子這個工具改版為「自適應 RWD 圖片語法產生器」,導致儲存表單狀態的功能必須重寫。

還好找到了一個基於 HTML5 開發的 jQuery 外掛 Sisyphus,不必使用 cookie,使用起來也超級方便、功能又強,解決了表單儲存的難題,本篇就來介紹如何使用。



一、CDN 安裝法


1. 官網介紹


官網做得非常直覺、易懂,進入後就可看到多個 DEMO 效果,旁邊就是範例程式碼。

form-remember-status-sisyphus-1-自動記憶表單狀態,重新開啟網頁後輸入的資料都還在﹍jQuery 外掛 Sisyphus

例如上圖這個複雜的表單,各種表單輸入內容、下拉選單、核取方塊等等,重新整理頁面後,馬上就可看到效果,狀態都被儲存起來了。

執行程式碼也超簡單的,為表單取個 ID (例如 myForm),執行以下程式碼就行了:

$("#myForm").sisyphus();

2. CDN 安裝連結

這麼好用的外掛,同時也不必另外找網頁空間存放檔案,已經有 CDN 支援了,請見這個網址:


要引用這個外掛,在網頁 head 區塊放以下程式碼即可:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1.3/sisyphus.min.js'></script>

第一行要先引用 jQuery,第二行就是 Sisyphus 的 CDN 連結。



二、範例程式碼


以下提供一個簡單的範例:

<!--表單內容-->
<div id="remember_form">
<label>名稱</label>
<br/>
<input name="name" type="text" value="Wayne Fu">
<br/><br/>
<label>性別</label>
<br/>
<select name="sex">
<option selected="selected">男生</option>
<option>女生</option>
<option>其他</option>
</select>
<br/><br/>
<label>網站名稱、描述</label>
<br/>
<textarea name="description" cols="50" rows="5">WFU BLOG:
Blogger 技巧及工具最豐富的專業部落格,提供 RWD 網站架設、維護諮詢、網頁設計服務,分享網路雲端應用心得。</textarea>
<br/><br/>
<label>網站性質</label>
<br/>
<label>
<input name="attr" type="checkbox" checked="checked">網路雲端</label>
<br/>
<label>
<input name="attr" type="checkbox" checked="checked">網頁設計</label>
<br/>
<label>
<input name="attr" type="checkbox">美食旅遊</label>
<br/>
<label>
<input name="attr" type="checkbox">流行資訊</label>
<br/>
<label>
<input name="attr" type="checkbox">3C 開箱</label>
<br/>
</div>

<!--引用外掛-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/sisyphus.js/1.1.3/sisyphus.min.js'></script>

<!--執行程式碼-->
<script>
$("#remember_form").sisyphus();
</script>


執行的效果大致如以下這個表單,可自行修改表單內容,再重新整理頁面,就可看到表單內容被記憶的效果:




三、補充事項


1. 一定要有 name

非常重要的一點,這個外掛的原理是讀取表單元件的屬性 "name" 來儲存資料,只要你的某個表單元素沒有設定 name,那個元素就無法儲存狀態了

所以執行外掛之前,請詳細檢查你的所有表單元件,例如 input、select、textarea...等,是否都設定了 name 的參數

如果不清楚 name 怎麼設定,可參考上面的程式碼範例。


2. API 說明

基本上這個外掛不需研究 API 說明,就很好用了。

如果有特別的需求需要使用官方 API,可參考官方說明書:


這裡提供了一些參數、事件可以使用。


更多 jQuery 相關工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP