Skip to content

Commit

Permalink
v5.14 支持键盘模拟
Browse files Browse the repository at this point in the history
  • Loading branch information
@BlueSky-07
BlueSky-07 committed Jan 26, 2021
1 parent 3e9f27f commit a340597
Show file tree
Hide file tree
Showing 8 changed files with 56 additions and 26 deletions.
6 changes: 4 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Shuang | 双拼练习
----

v5.13 2021.1.26 更新
v5.14 2021.1.26 更新

### 许可

Expand Down Expand Up @@ -45,7 +45,7 @@ v5.13 2021.1.26 更新

5. 多平台适配：

> 手机上使用：请切换至系统自带英文键盘以获得最佳输入体验，竖屏操作以获得最佳友好界面
> 手机上使用：请切换至系统自带英文键盘以获得最佳输入体验，竖屏操作以获得最佳友好界面，支持键盘模拟
>
> 电脑上使用：推荐使用 [Chrome 浏览器](https://www.google.cn/chrome)，支持较高版本的 IE （不保证后续更新仍支持）
Expand All @@ -58,6 +58,8 @@ v5.13 2021.1.26 更新
> 支持显示按键提示
>
> 支持显示实时按键
>
> 支持键盘模拟
### 添加自定义双拼方案

Expand Down
2 changes: 1 addition & 1 deletion build/app.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctypehtml><meta charset="UTF-8"><title>双拼练习 @ BlueSky</title><meta http-equiv="X-UA-Compatible"content="ie=EmulateIE9, chrome=1"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="build/style.min.css"><meta name="keywords"content="双拼,双拼输入,双拼练习,双拼入门,双拼教程,自然码,小鹤双拼"><meta name="description"content="帮助你快速上手双拼输入法，也可在微信小程序中搜索“双拼练习”使用。"><div class="header"><div class="menu"><label for="scheme-select"class="title">双拼方案：</label> <select id="scheme-select"></select></div><div class="menu"><label for="mode-select"class="title">练习模式：</label> <select id="mode-select"></select></div><div class="menu"><span class="title">模式说明：</span> <span id="mode-desc"></span></div><div class="menu"><span class="title">显示键位图：</span> <input type="checkbox"id="pic-switcher"></div><div class="menu"><span class="title">夜间模式：</span> <input type="checkbox"id="dark-mode-switcher"></div><div class="menu"><span class="title">正确时自动切换：</span> <input type="checkbox"id="auto-next-switcher"></div><div class="menu"><span class="title">错误时自动清空：</span> <input type="checkbox"id="auto-clear-switcher"></div><div class="menu"><span class="title">显示按键提示：</span> <input type="checkbox"id="show-keys"></div><div class="menu"><span class="title">显示实时按键：</span> <input type="checkbox"id="show-pressed-key"></div></div><div class="workspace"><div class="col"><span class="dict"id="dict"></span></div><div class="col"><div class="row"><span class="q"id="q"></span></div><div class="row"><input id="a"maxlength="2"autofocus="autofocus"autocomplete="off"><div class="btn"id="btn"></div></div></div></div><div class="keyboard"id="keyboard"><div class="keys"id="keys"><div class="row-1"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div><div class="row-2"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div><div class="row-3"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div></div><img class="pic"id="pic"> <img class="pic-placeholder"id="pic-placeholder"><div class="tips"id="tips"></div></div><div class="manual"><p>1. 切换至系统自带的英文输入法<p>2. 空格键 / 回车键 切换或清空<p>3. Tab 键 显示答案（可能不唯一）<p>4. 手机练习推荐使用微信小程序<p>5. 使用 <a title="立即下载 Chrome 浏览器"href="https://www.google.cn/chrome"target="_blank">Chrome 浏览器</a> 体验最佳<p>6. 查看 <a title="双拼输入介绍"href="https://sspai.com/post/42667"target="_blank">双拼输入介绍</a></div><div class="footer"><div class="wx"id="wx"><span id="wx-title">微信小程序：</span> <span id="wx-name">双拼练习</span> <img id="wx-qr"hidden="hidden"src="https://api.ihint.me/qr.php?https://mp.weixin.qq.com/a/~Jaww_jP-YK1G39fiZ01Qxg~~"></div><div class="copyright"><span>@ BlueSky | v5.13 2021.1.26 更新</span><br><a title="在 Github 上查看该项目源码"href="https://github.com/BlueSky-07/Shuang"target="_blank">https://github.com/BlueSky-07/Shuang</a><br><span>键位图 <a title="查看包含 Dvorak 键盘布局的键位图"href="https://api.ihint.me/keyboard"target="_blank">https://api.ihint.me/keyboard</a></span><br><span>字帖 <a title="字帖"href="https://api.ihint.me/zi"target="_blank">https://api.ihint.me/zi</a></span><br><a title="iOS/macOS 原生双拼输入法常见方案设置指南"href="https://sspai.com/post/60751"target="_blank">iOS/macOS 原生双拼输入法常见方案设置指南</a></div><div class="pays"id="pay"><span class="pay-title">支持开发者：</span> <span class="pay-name"id="alipay">支付宝</span> <img id="alipay-qr"hidden="hidden"src="https://api.ihint.me/qr.php?HTTPS://QR.ALIPAY.COM/FKX05370OGFIX8QOBKXS35"> <span class="pay-name"id="wxpay">微信</span> <img id="wxpay-qr"hidden="hidden"src="https://api.ihint.me/wxpay.jpg"></div></div><img src="https://api.ihint.me/statistics.php?site=shuang"hidden="hidden"><!--[if IE]>
<!doctypehtml><meta charset="UTF-8"><title>双拼练习 @ BlueSky</title><meta http-equiv="X-UA-Compatible"content="ie=EmulateIE9, chrome=1"><meta name="viewport"content="width=device-width,initial-scale=1"><link rel="stylesheet"href="build/style.min.css"><meta name="keywords"content="双拼,双拼输入,双拼练习,双拼入门,双拼教程,自然码,小鹤双拼"><meta name="description"content="帮助你快速上手双拼输入法，也可在微信小程序中搜索“双拼练习”使用。"><div class="header"><div class="menu"><label for="scheme-select"class="title">双拼方案：</label> <select id="scheme-select"></select></div><div class="menu"><label for="mode-select"class="title">练习模式：</label> <select id="mode-select"></select></div><div class="menu"><span class="title">模式说明：</span> <span id="mode-desc"></span></div><div class="menu"><span class="title">显示键位图：</span> <input type="checkbox"id="pic-switcher"></div><div class="menu"><span class="title">夜间模式：</span> <input type="checkbox"id="dark-mode-switcher"></div><div class="menu"><span class="title">正确时自动切换：</span> <input type="checkbox"id="auto-next-switcher"></div><div class="menu"><span class="title">错误时自动清空：</span> <input type="checkbox"id="auto-clear-switcher"></div><div class="menu"><span class="title">显示按键提示：</span> <input type="checkbox"id="show-keys"></div><div class="menu"><span class="title">显示实时按键：</span> <input type="checkbox"id="show-pressed-key"></div></div><div class="workspace"><div class="col"><span class="dict"id="dict"></span></div><div class="col"><div class="row"><span class="q"id="q"></span></div><div class="row"><input id="a"maxlength="2"autofocus="autofocus"autocomplete="off"><div class="btn"id="btn"></div></div></div></div><div class="keyboard"id="keyboard"><div class="keys"id="keys"><div class="row-1"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div><div class="row-2"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div><div class="row-3"><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div></div></div><img class="pic"id="pic"> <img class="pic-placeholder"id="pic-placeholder"><div class="tips"id="tips"></div></div><div class="manual"><p>1. 切换至系统自带的英文输入法<p>2. 空格键 / 回车键 切换或清空<p>3. Tab 键 显示答案（可能不唯一）<p>4. 手机练习推荐使用微信小程序<p>5. 使用 <a title="立即下载 Chrome 浏览器"href="https://www.google.cn/chrome"target="_blank">Chrome 浏览器</a> 体验最佳<p>6. 查看 <a title="双拼输入介绍"href="https://sspai.com/post/42667"target="_blank">双拼输入介绍</a></div><div class="footer"><div class="wx"id="wx"><span id="wx-title">微信小程序：</span> <span id="wx-name">双拼练习</span> <img id="wx-qr"hidden="hidden"src="https://api.ihint.me/qr.php?https://mp.weixin.qq.com/a/~Jaww_jP-YK1G39fiZ01Qxg~~"></div><div class="copyright"><span>@ BlueSky | v5.14 2021.1.26 更新</span><br><a title="在 Github 上查看该项目源码"href="https://github.com/BlueSky-07/Shuang"target="_blank">https://github.com/BlueSky-07/Shuang</a><br><span>键位图 <a title="查看包含 Dvorak 键盘布局的键位图"href="https://api.ihint.me/keyboard"target="_blank">https://api.ihint.me/keyboard</a></span><br><span>字帖 <a title="字帖"href="https://api.ihint.me/zi"target="_blank">https://api.ihint.me/zi</a></span><br><a title="iOS/macOS 原生双拼输入法常见方案设置指南"href="https://sspai.com/post/60751"target="_blank">iOS/macOS 原生双拼输入法常见方案设置指南</a></div><div class="pays"id="pay"><span class="pay-title">支持开发者：</span> <span class="pay-name"id="alipay">支付宝</span> <img id="alipay-qr"hidden="hidden"src="https://api.ihint.me/qr.php?HTTPS://QR.ALIPAY.COM/FKX05370OGFIX8QOBKXS35"> <span class="pay-name"id="wxpay">微信</span> <img id="wxpay-qr"hidden="hidden"src="https://api.ihint.me/wxpay.jpg"></div></div><img src="https://api.ihint.me/statistics.php?site=shuang"hidden="hidden"><!--[if IE]>
<script src="https://cdn.bootcdn.net/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/classlist/2014.01.31/classList.min.js"></script>
<![endif]--><script src="build/app.min.js"></script>
2 changes: 1 addition & 1 deletion index.src.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@
src="https://api.ihint.me/qr.php?https://mp.weixin.qq.com/a/~Jaww_jP-YK1G39fiZ01Qxg~~">
</div>
<div class="copyright">
<span>@ BlueSky | v5.13 2021.1.26 更新</span>
<span>@ BlueSky | v5.14 2021.1.26 更新</span>
<br>
<a title="在 Github 上查看该项目源码" href="https://github.com/BlueSky-07/Shuang"
target="_blank">https://github.com/BlueSky-07/Shuang</a>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "shuang",
"version": "5.13.0",
"version": "5.14.0",
"description": "帮助你快速上手双拼输入法",
"scripts": {
"clear": "rm -rf build",
Expand Down
32 changes: 23 additions & 9 deletions src/action.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,17 @@ Shuang.app.action = {
window.addEventListener('resize', Shuang.app.setting.updateKeysHintLayoutRatio)
window.resizeTo(window.outerWidth, window.outerHeight)

/** Simulate Keyboard */
const keys = $$('.key')
const qwerty = 'qwertyuiopasdfghjkl;zxcvbnm'
for (let i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', () => {
const event = new KeyboardEvent('keyup', { key: qwerty[i].toUpperCase()})
event.simulated = true
document.dispatchEvent(event)
})
}

/** All Done **/
this.redo()
},
Expand All @@ -144,6 +155,9 @@ Shuang.app.action = {
}
break
default:
if (e.simulated) {
$('#a').value += e.key.toLowerCase()
}
$('#a').value = $('#a').value
.slice(0, 2)
.replace(/[^a-zA-Z;]/g, '')
Expand All @@ -155,9 +169,9 @@ Shuang.app.action = {
const isRight = this.judge()
if (canAuto) {
if (isRight && Shuang.app.setting.config.autoNext === 'true') {
this.next()
this.next(e.simulated)
} else if (!isRight && Shuang.app.setting.config.autoClear === 'true') {
this.redo()
this.redo(e.simulated)
}
}
}
Expand All @@ -167,23 +181,23 @@ Shuang.app.action = {
const btn = $('#btn')
const [sheng, yun] = input.value
if (yun && Shuang.core.current.judge(sheng, yun)) {
btn.onclick = this.next.bind(this)
btn.onclick = () => this.next(true)
btn.innerText = Shuang.resource.emoji.right
return true
} else {
btn.onclick = this.redo.bind(this)
btn.onclick = () => this.redo(true)
btn.innerText = Shuang.resource.emoji.wrong
return false
}
},
redo() {
redo(noFocus) {
$('#a').value = ''
$('#a').focus()
$('#btn').onclick = this.redo.bind(this)
if (!noFocus) $('#a').focus()
$('#btn').onclick = () => this.redo(noFocus)
$('#btn').innerText = Shuang.resource.emoji.wrong
},
next() {
this.redo()
next(noFocus) {
this.redo(noFocus)
switch (Shuang.app.setting.config.mode) {
case 'all-random':
Shuang.core.current = Shuang.core.model.getRandom()
Expand Down
34 changes: 24 additions & 10 deletions src/app.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -518,7 +518,7 @@ Shuang.app.setting = {
keys[index].classList.add('pressed')
setTimeout(() => {
keys[index].classList.remove('pressed')
}, 300)
}, 250)
},
updateTips() {
const tips = $('#tips')
Expand Down Expand Up @@ -675,6 +675,17 @@ Shuang.app.action = {
window.addEventListener('resize', Shuang.app.setting.updateKeysHintLayoutRatio)
window.resizeTo(window.outerWidth, window.outerHeight)

/** Simulate Keyboard */
const keys = $$('.key')
const qwerty = 'qwertyuiopasdfghjkl;zxcvbnm'
for (let i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', () => {
const event = new KeyboardEvent('keyup', { key: qwerty[i].toUpperCase()})
event.simulated = true
document.dispatchEvent(event)
})
}

/** All Done **/
this.redo()
},
Expand All @@ -697,6 +708,9 @@ Shuang.app.action = {
}
break
default:
if (e.simulated) {
$('#a').value += e.key.toLowerCase()
}
$('#a').value = $('#a').value
.slice(0, 2)
.replace(/[^a-zA-Z;]/g, '')
Expand All @@ -708,9 +722,9 @@ Shuang.app.action = {
const isRight = this.judge()
if (canAuto) {
if (isRight && Shuang.app.setting.config.autoNext === 'true') {
this.next()
this.next(e.simulated)
} else if (!isRight && Shuang.app.setting.config.autoClear === 'true') {
this.redo()
this.redo(e.simulated)
}
}
}
Expand All @@ -720,23 +734,23 @@ Shuang.app.action = {
const btn = $('#btn')
const [sheng, yun] = input.value
if (yun && Shuang.core.current.judge(sheng, yun)) {
btn.onclick = this.next.bind(this)
btn.onclick = () => this.next(true)
btn.innerText = Shuang.resource.emoji.right
return true
} else {
btn.onclick = this.redo.bind(this)
btn.onclick = () => this.redo(true)
btn.innerText = Shuang.resource.emoji.wrong
return false
}
},
redo() {
redo(noFocus) {
$('#a').value = ''
$('#a').focus()
$('#btn').onclick = this.redo.bind(this)
if (!noFocus) $('#a').focus()
$('#btn').onclick = () => this.redo(noFocus)
$('#btn').innerText = Shuang.resource.emoji.wrong
},
next() {
this.redo()
next(noFocus) {
this.redo(noFocus)
switch (Shuang.app.setting.config.mode) {
case 'all-random':
Shuang.core.current = Shuang.core.model.getRandom()
Expand Down
2 changes: 1 addition & 1 deletion src/setting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ Shuang.app.setting = {
keys[index].classList.add('pressed')
setTimeout(() => {
keys[index].classList.remove('pressed')
}, 300)
}, 250)
},
updateTips() {
const tips = $('#tips')
Expand Down

0 comments on commit a340597

Please sign in to comment.