如何在使用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="jquery.js"></script>
<script src="jquery.longpress.js"></script>
<script src="jquery.mousewheel.js"></script>
<script src="plugins.js"></script>

有关此库的更多信息, 请访问Github上的官方存储库, 并在此处查看在线演示。

2.添加样式(CSS)

该插件不像其他插件那样具有侵入性, 因为它仅要求你包括3个CSS类。它们可以包含在css文件中或在文档上带有样式标签：

注意

你可能会看到原始的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方法。这样, 用户将可以在键盘上按住一个键, 并且如果该键具有可用的特殊字符, 它们将显示在屏幕上, 如图像(或官方演示)所示：

$(function(){
    // Select the element and initialize with the longPress method.
    $('#input_or_textarea').longPress();
});

编码愉快！