Attack on Life ⚔️

Personal blog

发表于 更新于 本文字数： 446 阅读时长 ≈ 1 分钟
本文介绍关于输入框实现自动补全效果，包括使用场景、实现细节等，以提高关于输入框实现自动补全效果的效率。

最近做WebShell有个需求即命令输入框支持自动补全。除了本身补全逻辑之外，需要解决的就是补全样式效果实现。

这里总结下实现技巧

补全效果涂上，输入框输入h,补全显示之后的ello。但是两者颜色一定是不同的。

CSS本身并不支持文本字符中比如前几个字符颜色，因此无法纯CSS解决如上的文本颜色显示。

因此需要DOM+JS解决。

阅读全文 »

发表于 更新于 本文字数： 1.2k 阅读时长 ≈ 2 分钟
本文是作者对WebShell下拷贝粘贴支持的介绍，包括WebShell下拷贝粘贴支持的优势、实现细节、相关资料等，这些步骤可以帮助作者提高WebShell下拷贝粘贴支持的效率。

WebShell下拷贝粘贴的支持最近遇到了问题，这里总结下

浏览器剪贴板权限

当浏览器剪贴板权限关闭的情况下，在使用Clipboard API时会报错。但由于有些用户的浏览器有安全要求，因此剪贴板权限是不打开的，那么这时WebShell还可以正常支持复制粘贴吗。答案是可以的，因为浏览器也有拷贝和粘贴支持

浏览器的拷贝粘贴

以Windows为例，拷贝是⌃+c，粘贴是⌃+v

阅读全文 »

发表于 更新于 本文字数： 276 阅读时长 ≈ 1 分钟
本文是作者对Nintendo Switch Online会员购买的介绍，包括Nintendo Switch Online会员购买的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Nintendo Switch Online会员购买的效率。

Online会员可以免费玩经典小游戏比如双截龙，当然还有其它一些福利。最近因为想玩小游戏，因此订阅下会员体验下。

会员订阅

我选择走HK的个人会员25HKD/月，家庭会员性价比更高，但拼车人数多，这里就不折腾了。

支付方式

支持Visa，因此国内信用卡绑定即可

阅读全文 »

发表于 更新于 本文字数： 1.8k 阅读时长 ≈ 3 分钟
本文是作者对Mousetrap使用的介绍，包括Mousetrap使用的优势、实现细节、相关资料等，这些步骤可以帮助作者提高Mousetrap使用的效率。

网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态，但胜在好用，还是很推荐。

这里介绍下使用

feat

支持单/组合键/gmail风格/Konami Code 按键绑定

  1. gmail风格即比如g i，连续输入这样的按键可以执行某个动作，这种热键的好处是很容易规避浏览器/插件的热键
  2. Konami Code 就有点像魂斗罗时，特定的按键触发30条命一样。个人认为这种按键绑定，如有必要，设计成网页彩蛋挺合适
阅读全文 »

发表于 更新于 本文字数： 2.1k 阅读时长 ≈ 4 分钟
本文是作者对WebShell中实现命令面板的介绍，包括WebShell中实现命令面板的优势、实现细节、相关资料等，这些步骤可以帮助作者提高WebShell中实现命令面板的效率。

最近做的WebShell-命令面板功能上线，这里Mark下其中的设计/思考

解决痛点

先解释下，为什么要做。

网页WebShell的功能在不断增加，不可避免会造成用户进行一些操作时，整个操作路径会很长。举个🌰，用户想登录一台机器。没有命令面板之前，需要这样做e

  1. 光标点击连接管理
  2. 光标聚焦搜索
  3. 光标选中连接配置
  4. 点击登录
阅读全文 »
0%