如何在使用jQuery的浏览器中长按键盘上显示额外的字符选择器

本文概述

1.下载长按
2.添加样式(CSS)
3.初始化长按

使用我们的智能手机, 我们可以使用默认安装的键盘轻松键入数字和特殊字符。但是, 如果你的计算机上装有真实的键盘, 则需要依靠按键上的印刷符号并键入复杂的组合来显示它们。如果你是极客, 这不是问题, 但是如果你的用户不太熟悉该技术, 那么他可能会使用浏览器上的移动键盘之类的功能：

文章图片
在本文中, 你将学习如何使用@quentint的jQuery插件Long Press在文本输入上实现特殊字符选择器。
1.下载长按 Long Press是一个jQuery插件, 可简化重音或稀有字符的书写。你需要在网站/ webapp上实现此功能的第一步是包括3个必需的脚本：

jQuery：你显然会在文档中加载jQuery。
jquery.longpress.js：插件脚本。
plugins.js：使插件正常工作所需的辅助方法。
jquery.mousewheel.js(可选, 但推荐)：提供支持使用鼠标滚轮从特殊键滚动到另一个键。

然后继续使用script标签将脚本加载到文档中：

< script src="http://www.srcmini.com/jquery.js"> < /script> < script src="http://www.srcmini.com/jquery.longpress.js"> < /script> < script src="http://www.srcmini.com/jquery.mousewheel.js"> < /script> < script src="http://www.srcmini.com/plugins.js"> < /script>

有关此库的更多信息, 请访问Github上的官方存储库, 并在此处查看在线演示。
2.添加样式(CSS) 该插件不像其他插件那样具有侵入性, 因为它仅要求你包括3个CSS类。它们可以包含在css文件中或在文档上带有样式标签：
注意 【如何在使用jQuery的浏览器中长按键盘上显示额外的字符选择器】你可能会看到原始的style.css以查看原始存储库中的任何更改。

.long-press-popup { position: fixed; bottom: 0; left: 0; right: 0; text-align: center; background: rgba(0, 0, 0, .8); padding-top: 20px; margin:0; font-size: 60px; }.long-press-popup li { display:inline-block; list-style: none; padding: 10px 34px; margin-right: 20px; margin-bottom: 20px; background: #000000; cursor:pointer; color: white; border: solid 4px black; border-radius: 12px; }.long-press-popup .selected { border-color: white; -webkit-box-shadow: 0 0 18px rgba(255, 255, 255, 0.75); -moz-box-shadow:0 0 18px rgba(255, 255, 255, 0.75); box-shadow:0 0 18px rgba(255, 255, 255, 0.75); }

3.初始化长按最后一步, 你只需要在要初始化插件的输入或文本区域上调用longPress方法。这样, 用户将可以在键盘上按住一个键, 并且如果该键具有可用的特殊字符, 它们将显示在屏幕上, 如图像(或官方演示)所示：