發表文章

目前顯示的是有「前端五四三」標籤的文章

解決autocomplete="off" 失效的問題

圖片
  目前chrome跟edge瀏覽器 用早期的解套方式autocomplete="off"讓自動帶出過去有填寫過的歷史資料不要出現 已經無效了 因此需要更改成 autocomplete="new-password" 這邊實測有效果 Ref: How to disable autocomplete of an HTML input field ? https://www.geeksforgeeks.org/how-to-disable-autocomplete-of-an-html-input-field/ disable-form-auto-complete.md Definitive guide → 6 ways to solve https://gist.github.com/eduardo-mior/ad14cab17fb5ab641812bff622534353 https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion 分享autocomplete="off" 不起作用解决方案 https://zhuanlan.zhihu.com/p/265024915 浏览器的记住密码,autocomplete= "new-password"解决 https://blog.csdn.net/aydongzhiping/article/details/81562757 'autocomplete="off"'在Chrome中不起作用解决方案 https://blog.csdn.net/xw505501936/article/details/52129579 input 输入框禁止自动填充-不是 autocomplete="off"不好用,是你没用正确方式打开 https://www.jianshu.com/p/06def8ad2347 解決autocomplete="off" 失效的問題 https://juejin.cn/post/6904199428543315981

如何解決RWD後導致map area固定位置跑版的失效模式_jQuery RWD Image Maps

圖片
  在前一篇介紹到map area的一個做法 但其 FMEA 主要會發生在 RWD或者變更browser解析度後 圖片的座標位置就跑版了的問題 修正前的跑位問題 在此只能另尋解套方案 這裡一樣站在巨人的肩膀上 找到了大神寫好的這個jQuery library https://github.com/stowball/jQuery-rwdImageMaps 官網提供的實驗案例sample 頁 http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html 那是採用MIT授權 因此免費商用是沒問題 在此透過CDN引入jQuery RWD Image Maps 前提是你也在前面有引入jQuery 那就補加上此段即可把Image Map RWD進行校正 1 2 3 4 5 6 7 8 9 10 11 12 <head> <script src= "https://cdnjs.cloudflare.com/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js" ></script> </head> <body > <script type= "text/javascript" > $( document ).ready( function () { $( 'img[usemap]' ).rwdImageMaps(); }); </script> </body> DEMO Ref: HTML Image Map 影像地圖 jQuery 推薦插件:maphilight (加強特效)、rwdImageMaps (支援RWD) https://mnya.tw/cc/word/1252.html 如何製作響應式的影像地圖 http://blog.shihshih.com/responsive-image-map/ https://cdnjs.com/libraries/jQuery-rwdImageMaps

HTML中如何針對圖片部分區塊去進行area做hover或者連結跳轉的設置

圖片
  前陣子遇到書局官網一個讓我滿頭大的技術問題 雛型稿 給我一張圖然後button位置四散在圖片不規則區域中 這讓我一時有點無從下手 不知道如何去配置button觸發 因為是整張圖特定某部分要配置連結跳轉 = =||| 所幸google一陣子 找到對的關鍵字和技術 首先至 https://www.image-map.net/ 上傳要進行定位的圖檔並自行配置區域 當然也可配置橢圓區域 在此就沒特別舉例了 效果DEMO Ref: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap2 全端 真是捨麼都要會阿...

整頁載入時候增加Loading效果

圖片
  書局網站優化 配置一個loading效果載入的css檔案 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 body { margin : 0 ; padding : 0 ; width : 100 vw; height : 100 vh; background-color : #eee ; } .content { display : flex; justify - content : center ; align-items: center ; width : 100 %; height : 100 %; } .loader-wrapper { z-index : 500 ; width : 100 %; height : 100 %; position : absolute ; top : 0 ; left : 0 ; background-color : #242f3f ; display :flex; justify - content : center ; align-items: center ; } .loader { z-index : 500 ; display : inline - block ; width : 30px ; height : 30px ; position : relative ; border : 4px solid #Fff ; animation: loader 2s infinite ease; } .loader-inner { vertical-align : top ; display : inline - block ; width : 100 %; background-color : #fff ; animation: loader-inner 2s inf...

Blazor日常開發異常_子畫面為何每次都直接整頁刷新不會局部更新

圖片
  如題同事來問我 他遇到的這個異常 第一眼就先確認應該是透過button開啟的一個子視窗原件 問題真因在於默認button 的type會被渲染為submit導致整頁表單提交因而導致 blazor會Reload一整頁 Ref: https://stackoverflow.com/questions/1878264/how-do-i-make-an-html-button-not-reload-the-page

Illustrator 中選取網頁所需色碼

圖片
  檢色滴管工具選取完後 快點兩下 填色的預覽區域 就可看到 Color Hex code進行複製 之後就可能提出header的css class來達到全域性調整 Ref: Find the HEX Code of a Color in Illustrator https://www.youtube.com/watch?v=JZLZ7ldTLQc&ab_channel=THESHORTTUTORIAL

.net webform RWD化表格Table

圖片
  有經驗且資深的asp.net網頁應用開發人員 都會知道所謂的 Server Side Render到Client Side這段過程 這裡準備的資料庫與程式可以參照之前 [.NET Webform]_ListView_DataPager使用方式 只是將前端aspx替換為GridView WebFormGridView.aspx程式碼 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <%@ Page Language= "C#" AutoEventWireup= "true" CodeBehind= "WebFormGridView.aspx.cs" Inherits= "RWDTableApp.WebFormGridView" %> <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head runat= "server" > <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> </head> <body> <form id= "form1" runat= "server" > <div> <asp:GridView ID= "GridView1" runat= "server" > </asp:GridView> </div> </form> </body> </html> WebFormGridV...