[Javascript] 關於一個 select 的 multiple 的處理

2023-07-06

最近在處理一項需求時,遇到了一個讓我感到驚訝的情況,但仔細思考後發現其實只是我自己的誤解。這也是一個比較少用到的情境。

在HTML規範中,select元素有一個multiple 的屬性,詳細可參考這裡。儘管多選通常可以使用input checkbox來實現,

但在前端處理上會稍嫌繁瑣。因此,有時我會建議客戶使用select的multiple="multiple"屬性,特別是在手機上,操作體驗相對更為舒適。



[Javascript] 使用 Keydown 事件實現輸入框值的同步支持負數小數點

2023-07-05


主要遇到,客戶希望再輸入一個 價格的時候,其他欄位的價格可以預先填寫好,如果他修改過價格後就不能再被更改

這需求感覺蠻常碰到的,但是客戶要求很直觀,等於我就是只能從 Keydown 事件下手,今天,我們將探討如何使用 JavaScript 中的 Keydown 事件來實現這樣的需求



[Javascript] 實做鍵盤方向鍵的左右鍵連續點擊

2023-07-04


最近我遇到業主一個需求,需要在網頁上實現按下鍵盤方向鍵左鍵和右鍵時執行相應的動作。在尋找相應的解決方案時,

發現 Javascript 並沒有提供直接的方法,於是我嘗試使用一種古老的方法,即利用時間差來達到按兩次快速點擊的效果。



[C#] 使用 C# 做一個假裝自己是 RDP Server

2023-06-30


看到一段有趣的  code ,就是有網路上的大大用 python 寫了一個模擬自己試 RDP Server

然後看了一下,程式碼不難,我就翻寫成 C# ,測了一下,蠻好玩的就分享一下..



[Web] 一些產生 Avatar 方便的網站,透過網址就可以產生的獨立 Avatar 圖片

2023-06-29

最近在測試一些前端的東西,我需要用戶的 avatar ,所以我的需求是

透過網址就直接能夠生出一張可愛或是勘看的圖片,所以網路上找一下,因為都是要自己手動生成

所以我把一些找到的整理一下



[Javascript] input 輸入處理:限制只允許輸入英文、數字和橫線 (-) 並自動轉換為大寫

最近我遇到了一個 JavaScript 的問題,雖然不是什麼大事,但對方需要在一個 input 欄位中,只允許輸入英文、數字和橫線 (-)。

此外,他希望輸入小寫英文字母時自動轉換為大寫。儘管這聽起來有些簡單,但每次都需要重新寫一次,因此我想將這個解決方案記錄下來。




這裡是我所使用的方法:在 onKeypress 事件中使用正則表達式(regex)進行輸入阻擋,

確保只有英文、數字和橫線 (-) 能夠進入。接著,在 onKeyUp 事件中,我將輸入的文字轉換為大寫,確保統一的輸入格式。



值得一提的是,我在網路上看到了一個使用 CSS 的方法,即使用 style="text-transform: uppercase"。

這樣可以讓輸入的字"看起來"是大寫,但在取值時仍然是小寫。雖然這是一個簡單的做法

但需要特別注意。如果在送出前將值轉換為大寫,也是一種方便的解決方案,避免使用 onKeyUp 的方法。



當麻許的超技八 2014 | Donma Hsu Design.