JQuery Mobile提供了一種方便易用的數字鍵盤插件,用于在移動端上輸入數字和金額。這個插件有一個默認樣式,但也可以通過CSS進行自定義。
要使用JQuery Mobile的數字鍵盤插件,首先要確保已引用正確的JS和CSS文件。以下是基本的代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery Mobile數字鍵盤示例</title> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <label for="input-num">輸入數字:</label> <input type="text" pattern="[0-9]*" id="input-num" name="input-num" data-type="number"> </div> </div> </body> </html>
在這個示例中,input元素使用了data-type="number"屬性,這告訴移動瀏覽器顯示數字鍵盤而不是標準鍵盤。同時,該元素也使用了pattern="[0-9]*"屬性,以便只允許輸入數字。
默認情況下,JQuery Mobile的數字鍵盤插件是簡約的,只有數字和小數點。如果需要,可以使用CSS進行自定義,例如添加貨幣符號或調整鍵盤整體樣式。
總之,這個數字鍵盤插件簡單易用,可以通過純HTML和CSS輕松定制。它是在移動端上進行數字和金錢輸入的理想選擇。
下一篇用css編輯六張圖片