?

先看下微信當中的自帶的數字鍵盤

這種實現方式比較簡單，可以直接用inline-block標簽，設置每行平均寬度，比如一行要放4個按鈕，可以那么寬度就可以設為25%，同時要注意設置css樣式為box-sizing: border-box,這樣在設置邊框 的時候就不會超出定義的固定寬度。

接下來看下另一種復雜點的鍵盤：

初看貌似可以像在上面方案一樣，只是鍵盤文字再套一層標簽，然后給外部標簽增加padding。但是由于手機寬度不是固定的，所以無法計算出通用padding使得按鈕元素在每一行精確平分空間顯示。

這時候flex布局的justify-content：space-between屬性就派上用場了。

從上圖可以看到，該屬性可以使一行當中的左右兩邊的元素靠邊，中間元素會自動分配等距間隔。

所以用于存放鍵盤數字的數組就可以寫成這樣：

const textArr = [['A', 'B', 'C', 'D', 'E','F'],['G', 'H', 'I', 'J', 'K',],['L', 'M', 'N', 'O', 'P', 'Q']...]

這時候會遇到最后一行不是填滿一整行的情況，那么可以將剩下的元素設置為空，['掛'，'','','','',''],同時在循環的時候判斷元素是否為空，為空的話加上css樣式：opacity: 0（不能設置為display: none);

?

最后：

1? 為提高性能，注意采用事件委托方式綁定點擊事件；

2? 按鈕點擊的時候要有相應反饋，可以設置元素的為active的時候改變背景色。水墨散開效果是現在安卓上比較流行的點擊反饋的效果，下面這段代碼是實現該效果的，使用的時候給按鈕添加ripple類名就可以了：

1 .ripple { 2 position: relative; 3 //隱藏溢出的徑向漸變背景 4 // overflow: hidden; 5 } 6 7 .ripple:after { 8 content: ""; 9 display: block; 10 position: absolute; 11 width: 100%; 12 height: 100%; 13 top: 0; 14 left: 0; 15 pointer-events: none; 16 //設置徑向漸變 17 background-image: radial-gradient(circle, #666 10%, transparent 10.01%); 18 background-repeat: no-repeat; 19 background-position: 50%; 20 transform: scale(10, 10); 21 opacity: 0; 22 transition: transform .3s, opacity .3s; 23 } 24 25 .ripple:active:after { 26 transform: scale(0, 0); 27 opacity: .3; 28 //設置初始狀態 29 transition: 0s; 30 }

?

轉載于:https://www.cnblogs.com/pjl43/p/9788469.html

總結

以上是生活随笔為你收集整理的绘制自定义键盘的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。