vue 软键盘组件封装
场景和需求
1 软键盘固定
2 多输入框共用一个组件，聚焦切换时操作对象自动切换
3 根据光标在输入框的位置进行相应的输入和删除操作
4 点击软键盘时保存输入框光标活跃
5 输入框和键盘在一个弹窗组件中，弹窗打开时对其中一个输入框默认聚焦
6 样式方面，按键宽度自适应，可以给特定按键特定样式。
7 场景下特殊需求，当不对任意输入框聚焦时，默认对其中某个输入框进行操作。
实现
光标这个没做到输入框保持活跃，和删除光标处内容。
这里是获取光标位置的函数，但是当点击按钮时输入框就会blur，就无法获取了。
//获取光标位置函数
getCursorPosition(id) {
const elem = document.querySelector(id);
var pp = 0;
// IE
if (document.selection) {
elem.focus();
var aa = document.selection.createRange();
aa.moveStart('character', -elem.value.length);
pp = aa.text.length;
}
// FF, Chrome
else if (elem.selectionStart || elem.selectionStart == '0') {
pp = elem.selectionStart;
}
return pp;
},
子组件
<template>
<div class="keyboards">
<div class="keyboards-row" v-for="(keyArr, index) in activeKey" :key="index">
<button
class="keyboards-key"
v-for="item in keyArr"
v-text="item"
:key="item + index"
:class="{
'keyboards-key--active': item === activeButton,
'keyboards-key--number': type === 'number',
'keyboards-key--all': type !== 'number',
'keyboards-key--star': item === '*',
'keyboards-key--option': isOption(type, item)
}"
@click="clickKey(item)"
@mousedown="changeActiveButton(item)"
/>
</div>
</div>
</template>
<script>
export default {
name: 'SoftKeyboard',
props: {
type: {
type: String,
// number || uppercase || lowercase
default: () => 'number'
},
inputText: {
type: String,
default: () => ''
},
inputDom: {
type: String,
default: () => ''
}
},
data() {
return {
activeKey: [],
isUppercase: '',
activeButton: '', // 当前按压按钮
// 数字键盘布局
numberKey: [
['7', '8', '9'],
['4', '5', '6'],
['1', '2', '3'],
['0', '*', '删除', '清空']
],
// 全键布局
allBigKey: [
['!', '@', '#', '$', '%', '^', '&', '*', '-', '_'],
['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
['切换', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
['删除', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '.', '清空']
],
allsmallKey: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
['切换', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
['删除', 'z', 'x', 'c', 'v', 'b', 'n', 'm', '.', '清空']
]
};
},
created() {
this.changeKeyborad(this.type);
if (this.type === 'uppercase') {
this.isUppercase = true;
}
document.addEventListener('mouseup', this.mouseUp);
},
mounted() {},
destroyed() {
// 组件销毁时移除添加到document上的事件，避免影响到其他组件
document.removeEventListener('mouseup', this.mouseUp);
},
methods: {
changeKeyborad(type) {
switch (type) {
case 'number':
this.activeKey = this.numberKey;
break;
case 'uppercase':
this.activeKey = this.allBigKey;
break;
case 'lowercase':
this.activeKey = this.allsmallKey;
break;
default:
break;
}
},
isOption(type, btn) {
if (type === 'number') {
return false;
}
if (btn === '切换' || btn === '删除' || btn === '清空') {
return true;
}
return false;
},
clickKey(key) {
let value = this.inputText;
switch (key) {
case '删除':
value = value.length ? value.slice(0, -1) : value;
break;
case '清空':
value = '';
break;
case '切换':
this.isUppercase = !this.isUppercase;
this.activeKey = this.isUppercase ? this.allBigKey : this.allsmallKey;
break;
default:
value = value + key;
break;
}
this.$emit('onChange', value);
},
changeActiveButton(button) {
this.activeButton = button;
},
//获取光标位置函数
getCursorPosition(id) {
const elem = document.querySelector(id);
var pp = 0;
// IE
if (document.selection) {
elem.focus();
var aa = document.selection.createRange();
aa.moveStart('character', -elem.value.length);
pp = aa.text.length;
}
// FF, Chrome
else if (elem.selectionStart || elem.selectionStart == '0') {
pp = elem.selectionStart;
}
return pp;
},
mouseUp() {
this.activeButton = '';
}
}
};
</script>
<style scoped lang="scss">
.keyboards {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: #f0f0f0;
padding: 3px;
border-radius: 5px;
.keyboards-row {
width: 100%;
display: flex;
justify-content: space-around;
.keyboards-key {
width: 100%;
height: 56px;
margin: 2px;
padding: 5px;
flex-grow: 0;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #dedede;
// border-radius: 4px;
border-bottom: 1px solid #b5b5b5;
border-radius: 5px;
-webkit-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.3);
cursor: pointer;
font-size: 1.5em;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC,
WenQuanYi Micro Hei, Arial, sans-serif;
font-weight: 400;
background-color: #fdfdfd;
// &:hover {
// box-shadow: 0 0 4px 2px #ccd1e7;
// }
&.keyboards-key--active {
background-color: #e5e5e5;
}
// &.keyboards-key--number {
// width: 32%;
// }
&.keyboards-key--all {
width: 9.1%;
}
&.keyboards-key--star {
font-size: 2em;
}
&.keyboards-key--option {
width: 20%;
}
}
}
}
</style>
父组件
<el-form ref="modelForm" :model="modelForm" :rules="modelRules" label-width="60px" size="medium">
<el-form-item label="输入框1" prop="input1">
<el-input
id="input-input1"
size="small"
clearable
v-model.trim="modelForm.input1"
@focus="setInput('input1')"
style="width: 100%"
></el-input>
</el-form-item>
<el-form-item label="输入框2" prop="input2">
<el-input
id="input-input2"
size="small"
maxlength="3"
ref="input2"
clearable
v-model.trim="modelForm.input2"
@focus="setInput('input2')"
></el-input>
</el-form-item>
</el-form>
<softKeyBoard @onChange="onChange" type="number" :inputText="input" :inputDom="inputDom" />
<script>
export default {
computed: {
input() {
if (this.activeInput) {
return this.modelForm[this.activeInput];
}
return '';
}
},
data() {
return {
activeInput: '',
};
},
methods: {
setInput(prop) {
this.activeInput = prop;
},
onChange(input) {
if (this.activeInput === 'input1') {
input = input.slice(0, 7);
}
if (this.activeInput === 'input2') {
input = input.slice(0, 3);
}
this.$set(this.modelForm, this.activeInput, input);
},
}
}
</script>
