Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用安全模式创建虚拟键盘类对象，修复键盘小图标点击无效（键盘不收回去）问题 #2

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

使用安全模式创建虚拟键盘类对象，修复键盘小图标点击无效（键盘不收回去）问题 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0d6a5e6
mod:虚拟数字键盘安全模式创建，可配置输入数字位数和小数位数
Sep 5, 2019
825193c
fix:点击键盘小图标键盘没有收回去
Sep 5, 2019
ff40fc4
feat:增加自定义配置可选获取焦点和补0
Sep 5, 2019
de2cb6a
feat:虚拟键盘多个输入框切换数据,顺便格式化代码
Sep 6, 2019
e4cee01
feat:增加清除键盘输入缓存回调函数
Sep 18, 2019
b80035f
uniapp键盘组件
Oct 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
├── Lottery //抽奖插件
├── AreaInertailScroll // 移动端城市联动
├── virtualKeyBoard //虚拟键盘支付插件
├── class-carousel // class控制的轮播
├── keyboard // uniapp组件
├── class-carousel // class控制的轮播
├── mobile-touch-slider // 移动端轮播
├── ScrollClassAnimate // 下拉,上拉加载动画
├── imitate-jq-animate // 仿jquery动画函数
Expand Down Expand Up @@ -63,7 +64,7 @@
///抽奖旋转完成之后的回调
success: function(res) {
document.querySelector('#result').innerHTML = `恭喜你,抽中${res.desc}`;

}
});

Expand All @@ -76,11 +77,11 @@
setTimeout(() => {
lotteryHanlde(lotter);
}, 10)


}
```
[演示地址: http://www.wzhshare.top/plugin-collect/Lottery/demo.html](http://www.wzhshare.top/plugin-collect/Lottery/demo.html)
[演示地址: http://www.wzhshare.top/plugin-collect/Lottery/demo.html](http://www.wzhshare.top/plugin-collect/Lottery/demo.html)

![AreaInertailScroll](https://github.com/WangZhenHao/plugin-collect/blob/master/images/Lottery/Lottery.gif)

Expand All @@ -98,9 +99,9 @@
console.log(this);
this.target.value = res.join(',');
}
});
});
```
[演示地址: http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html](http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html)
[演示地址: http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html](http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html)

![AreaInertailScroll](https://github.com/WangZhenHao/plugin-collect/blob/master/images/AreaInertiaScroll/AreaInertiaScroll.gif)

Expand All @@ -113,10 +114,10 @@
```
//class="key-board-cursor" 获取焦点闪烁的class类
//data-key-board="target" 触发虚拟键盘显示和隐藏的元素

<div class="key-board-cursor" data-key-board="target" id="keyBoard">
</div>

//javascript
var keyBoard = new KeyBoard({
target: 'target',
Expand All @@ -131,7 +132,7 @@
});

```
[演示地址: http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html](http://www.wzhshare.top/plugin-collect/virtualKeyBoard/demo.html)
[演示地址: http://www.wzhshare.top/plugin-collect/AreaInertiaScroll/demo.html](http://www.wzhshare.top/plugin-collect/virtualKeyBoard/demo.html)
![AreaInertailScroll](https://github.com/WangZhenHao/plugin-collect/blob/master/images/virtualKeyBoard/virtualKeyBoard.gif)

### class控制的轮播
Expand Down Expand Up @@ -182,7 +183,7 @@
```
使用方法
//html部分
<div class="boy-animate" boy-animate-duration="2s" boy-animate-effect="bounce"
<div class="boy-animate" boy-animate-duration="2s" boy-animate-effect="bounce"
boy-animate-delay="0s">
</div>
boy-animate-duration:表示动画执行的时间(秒);
Expand All @@ -208,4 +209,3 @@
```

[演示地址: http://www.wzhshare.top/plugin-collect/imitate-jq-animate/demo.html](http://www.wzhshare.top/plugin-collect/imitate-jq-animate/demo.html)

65 changes: 43 additions & 22 deletions virtualKeyBoard/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,49 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>虚拟键盘</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_709005_2fq0kn635st.css">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>虚拟键盘</title>
<link rel="stylesheet"
href="http://at.alicdn.com/t/font_709005_2fq0kn635st.css">
<style>
.input-price-box {
height: 30px;
line-height: 30px;
margin-bottom: 10px;
border: 1px solid #FF6A00;
border-radius: 7px;
text-align: right;
}

</style>
</head>

<body>
<div class="key-board-cursor" data-key-board="target" id="keyBoard">
</div>
<script src="./virtualKeyBoard.js"></script>
<script>
var keyBoardEl = document.querySelector('#keyBoard');
var keyBoard = new KeyBoard({
target: 'target',
callBack: function(res, status) {
// console.log(res.value);
keyBoardEl.innerHTML = res.value;
console.log(keyBoardEl.innerHTML)
},
comfirm: function(res) {
console.log(res);
}
});
</script>
<div class="key-board-cursor input-price-box"
data-key-board="target" data-keyboard="target">
</div>
<div class="key-board-cursor input-price-box"
data-key-board="target">
</div>
<script src="./virtualKeyBoard.js"></script>
<script>
var keyBoard = KeyBoard({
target: 'target',
isInitFocus: false, // 初始化是获取焦点显示键盘
isFillDecimal: false, // 默认 false 输入"."是否补0，不补0将处理掉"."
inputRegion: '.input-price-box', // 需要作为输入框绑定的类
callBack: function (res, status) {
console.log('键盘点击回调', res, status)
},
// 确认按钮事件
comfirm: function (res) {
console.log(res);
}
});
</script>
</body>
</html>

</html>
Loading