Translation Notice
This article was machine-translated using DeepSeek-R1.
- Original Version: Authored in Chinese by myself
- Accuracy Advisory: Potential discrepancies may exist between translations
- Precedence: The Chinese text shall prevail in case of ambiguity
- Feedback: Technical suggestions regarding translation quality are welcomed
Why Build a Custom Keyboard?
I’m currently developing a WeChat Miniprogram that requires users to input numbers.
Issues with System Keyboards
Using system keyboards presents several problems:
- Small key sizes make input inconvenient;
- No way to prevent invalid characters (e.g., “&”);
- Decimal point is hard to locate on some devices;
- Users must click input fields first;
- Inability to customize button styles.
Ideal Custom Keyboard Layout
123
456
789
.0Submit
BackspaceClear
How to Build It?
Group each row of buttons in a view:
WXML
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
|
<!--pages/a/a.wxml-->
<!--Input Keyboard-->
<!--Five rows, each in a view-->
<view class='keyboard-row'>
<button type='default' plain='true' class='one' data-key='1' bindtap='tapKey'>1</button>
<button type='default' plain='true' class='two' data-key='2' bindtap='tapKey'>2</button>
<button type='default' plain='true' class='three' data-key='3' bindtap='tapKey'>3</button>
</view>
<view class='keyboard-row'>
<button type='default' plain='true' class='four' data-key='4' bindtap='tapKey'>4</button>
<button type='default' plain='true' class='five' data-key='5' bindtap='tapKey'>5</button>
<button type='default' plain='true' class='six' data-key='6' bindtap='tapKey'>6</button>
</view>
<view class='keyboard-row'>
<button type='default' plain='true' class='seven' data-key='7' bindtap='tapKey'>7</button>
<button type='default' plain='true' class='eight' data-key='8' bindtap='tapKey'>8</button>
<button type='default' plain='true' class='nine' data-key='9' bindtap='tapKey'>9</button>
</view>
<view class='keyboard-row'>
<button type='default' plain='true' class='dot' data-key='.' bindtap='tapKey'>.</button>
<button type='default' plain='true' class='zero' data-key='0' bindtap='tapKey'>0</button>
<button type='default' plain='true' class='submit' bindtap='tapSubmit'>Submit</button>
</view>
<!--clear&delete-->
<view class='keyboard-row'>
<button type='default' plain='true' class='del' bindtap='tapDel'>Backspace</button>
<button type='default' plain='true' class='clear' bindtap='tapClear'>Clear</button>
</view>
|
WXSS
1
2
3
4
5
6
7
8
9
10
|
/*pages/a/a.wxss*/
.keyboard-row {
width: 100%;
height: 35%;
border-radius: 98rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
|
JS
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
|
// pages/a/a.js
Page({
data: {
num: 0,
hasDot: false // Prevent multiple decimal points
},
tapKey: function(evt) {
var x = evt.currentTarget.dataset.key
if(x == '.') {
if(this.data.hasDot) return
this.setData({
hasDot: true
})
}
this.setData({
num: this.data.num == '0'? x: this.data.num + x
})
},
tapSubmit: function() {
// User has submitted
console.log('res =', this.data.num)
},
tapDel: function() {
if(this.data.num == '0') return
if(this.data.num[this.data.num.length - 1] == '.') this.setData({
hasDot: false
})
this.setData({
num: this.data.num.length == 1? '0': this.data.num.substring(0, this.data.num.length - 1)
})
},
tapClear: function() {
this.setData({
num: '0',
hasDot: false
})
}
})
|
Keyboard Preview
