本文概述
- 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 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方法。这样, 用户将可以在键盘上按住一个键, 并且如果该键具有可用的特殊字符, 它们将显示在屏幕上, 如图像(或官方演示)所示:
$(function(){// Select the element and initialize with the longPress method.$('#input_or_textarea').longPress();
});
编码愉快!
推荐阅读
- 如何使用jQuery模拟Android样式锁定模式(拖放)
- 如何使用jQuery AJAX获得上载或下载的进度
- 如何使用jQuery轻松创建二维码
- 如何解决gulp异常(参考错误primordials未定义错误)
- 如何使用Node.js混淆JavaScript代码
- 如何检查Node.js中是否存在活动的Internet连接
- 如何使用Node.js关闭和重启Linux
- 如何在Node.js中使用SSH2从UNIX服务器下载整个目录
- 找不到相对于目录的预设”es2015″和”react”