宜信同城网交流论坛技术专版技术专区Key管理设备按键事件方法： addEventListener: 添加按键事件监听器hideSoftKeybord: 隐藏软键盘setAssistantType: 设置辅助 ...

admin 发表于 2023-2-16 18:54:52

Key管理设备按键事件

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <h2 style="margin-left:.8em;">方法：</h2>
<ul><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.addEventListener">addEventListener</a>: 添加按键事件监听器</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.hideSoftKeybord">hideSoftKeybord</a>: 隐藏软键盘</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.setAssistantType">setAssistantType</a>: 设置辅助输入类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.showSoftKeybord">showSoftKeybord</a>: 显示软键盘</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.removeEventListener">removeEventListener</a>: 移除按键事件监听器</li></ul>
<h2 style="margin-left:.8em;">对象：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/key.html#plus.key.KeyType">KeyType</a>: 按键类型</li><li><ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.KeyEvent">KeyEvent</a>: 按键事件</li></ul>
<h2 style="margin-left:.8em;">回调方法：</h2>
<ul><li><ahref="https://www.html5plus.org/doc/zh_cn/key.html#plus.key.KeyEventCallback">KeyEventCallback</a>: 按键事件的回调函数</li></ul>
<h2 style="margin-left:.8em;">权限：</h2>
5+功能模块（permissions）
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
{
// ...
"permissions":{
// ...
"Webview": {
"description": "窗口管理"
}
}
}
</code></code></pre>
<h1 style="margin-left:0;">addEventListener</h1>
添加按键事件监听器
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.key.addEventListener( keyevent, listener, capture );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
添加按键事件监听器，当指定的按键事件发生时，回调函数将触发。应用中存在多个Webview窗口时，按照窗口的显示栈顺序从后往前查找，查找到添加按键事件监听器的窗口后停止（中断前面Webview窗口对按键事件的监听），并向窗口触发执行按键回调事件。在同一Webview窗口中可多次调用此方法对同一事件添加多个监听器，触发时按照添加的顺序先后调用。注意：此方法无法监听软键盘的按键事件。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/key.html#plus.key.KeyType">KeyType</a> ) 必选 要监听的按键事件类型 </li><li>listener: ( <ahref="https://www.html5plus.org/doc/zh_cn/key.html#plus.key.KeyEventCallback">KeyEventCallback</a> ) 必选 监听按键事件发生时调用的回调函数 </li><li>capture: ( Boolean ) 可选 捕获按键事件流顺序，暂作为保留参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
// 监听“返回”按钮事件
function addEventTest() {
plus.key.addEventListener("backbutton",function(){
alert( "BackButton Key pressed!" );
});
}
</script>
</head>
<body>
<button onclick="addEventTest()">监听“返回”按键</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">hideSoftKeybord</h1>
隐藏软键盘
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.key.hideSoftKeybord();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
</script>
</head>
<body>
编辑框：<input type="text" placeholder="请输入"></input> 
<button onclick="plus.key.hideSoftKeybord()">隐藏软键盘</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setAssistantType</h1>
设置辅助输入类型
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.key.setAssistantType(type);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
input的type类型为text获取焦点时，在软键盘上方显示辅助输入条方便用户快速输入。在页面中input编辑框type类型不为"tel"、"email"时生效（type为tel类型时一定显示tel的辅助输入条，type为email时一定显示email的辅助输入条）。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>type: ( String ) 必选 辅助输入类型 可取值： "nick" - 用户名（昵称）类型，自动保存最后输入的两个用户名，并在辅助输入条上显示； "address" - 地址类型，在辅助输入条上显示当前位置（定位获取）、家庭地址（在设置界面中配置）、单位地址（在设置界面中配置）； "tel" - 电话号码类型，自动保存最后两次输入的两个手机号码显示在辅助输入条上，与input的type类型为tel逻辑一致； "email" - 邮箱地址类型，自动保存最后两次输入的两个邮箱地址显示在辅助输入条上，与Input的type类型为email逻辑一致； "company" - 公司名称类型，自动保存最后一次输入的公司名称显示在辅助输入条上； "tax" - 税号类型，自动保存最后一次输入的企业税务标识显示在辅助输入条上； "id" - 身份证号码类型，自动保存最后一次输入的身份证号显示在辅助输入条上； "none" - 不使用辅助输入。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
</script>
</head>
<body>
用户名编辑框：<input type="text" onfocus="plus.key.setAssistantType('nick')" onblur="plus.key.setAssistantType('none')" placeholder="请输入用户名"></input> 
地址编辑框：<input type="text" onfocus="plus.key.setAssistantType('address')" onblur="plus.key.setAssistantType('none')" placeholder="请输入地址"></input> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">showSoftKeybord</h1>
显示软键盘
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void plus.key.showSoftKeybord();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
强制显示系统软键盘，如果软键盘已经显示则不做任何操作。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持)</li><li>iOS - ALL (不支持) : 需获取DOM中的input元素并调用其focus方法获取焦点才能主动弹出系统软键盘。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready', plusReady, false);
}
</script>
</head>
<body>
编辑框：<input type="text" placeholder="请输入"></input> 
<button onclick="plus.key.showSoftKeybord()">显示软键盘</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">removeEventListener</h1>
移除按键事件监听器
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.key.removeEventListener( event, listener );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从窗口移除指定的事件监听器。若没有查找到对应的事件监听器，则无任何作用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.KeyType">KeyType</a> ) 必选 要移除的事件类型 </li><li>listener: ( <ahref="https://blog.csdn.net/qq_40575646/article/details/122819230#plus.key.KeyEventCallback">KeyEventCallback</a> ) 必选 要移除回调函数对象 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
function onback(){
alert( "BackButton Key pressed!" );
}
// 监听“返回”按钮事件
function addEventTest() {
plus.key.addEventListener("backbutton",onback);
}
// 取消监听“返回”按钮事件
function removeEventTest(){
plus.key.removeEventListener("backbutton",onback);
}
</script>
</head>
<body>
<button onclick="addEventTest()">监听“返回”按键</button>
<button onclick="removeEventTest()">取消监听“返回”按键</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">KeyType</h1>
按键类型
<h2 style="margin-left:.8em;">常量：</h2>
<ul><li>"backbutton": (String 类型 )设备“返回”按钮按键事件 如果需要改变默认“返回”按钮的处理逻辑，则可通过plus.key.addEventListener来注册监听"backbutton"事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 默认处理逻辑为退出应用。 </li><li>iOS - ALL (支持) : 标题栏的“返回”按钮点击时触发此事件。默认不处理此事件。 </li></ul></li><li>"keydown": (String 类型 )键按下事件 如果需要改变默认键按下的处理逻辑，则可通过plus.key.addEventListener来注册监听"keydown"事件。可通过回调函数中KeyEvent对象的keyCode来获取按下的键值。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 根据系统keydown事件触发，软键盘不会触发此事件。默认处理逻辑由系统决定。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"keyup": (String 类型 )键松开事件 如果需要改变默认键松开的处理逻辑，则可通过plus.key.addEventListener来注册监听"keyup"事件。可通过回调函数中KeyEvent对象的keyCode来获取松开的键值。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 根据系统keyup事件触发，软键盘不会触发此事件。默认处理逻辑由系统决定。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"longpressed": (String 类型 )长按键事件 如果需要改变默认长按键的处理逻辑，则可通过plus.key.addEventListener来注册监听"longpressed"事件。长按键时会多次触发回调函数，通过回调函数中KeyEvent对象的keyCode来获取长按的键值。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 根据系统keyup事件触发，软键盘不会触发此事件。默认处理逻辑由系统决定。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"menubutton": (String 类型 )设备“菜单”按钮按键事件 如果需要改变默认“菜单”按钮的处理逻辑，则可通过plus.key.addEventListener来注册监听"menubutton"事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 默认处理逻辑无操作。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"searchbutton": (String 类型 )设备“搜索”按钮按键事件 如果需要改变默认“搜索”按钮的处理逻辑，则可通过plus.key.addEventListener来注册监听"searchbutton"事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 默认处理逻辑为打开系统搜索应用。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"volumeupbutton": (String 类型 )设备“音量+”按钮按键事件 如果需要改变默认“音量+”按钮的处理逻辑，则可通过plus.key.addEventListener来注册监听"volumeupbutton"事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 默认处理逻辑为增加系统音量。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li><li>"volumedownbutton": (String 类型 )设备“音量-”按钮按键事件 如果需要改变默认“音量-”按钮的处理逻辑，则可通过plus.key.addEventListener来注册监听"volumedownbutton"事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 默认处理逻辑为减少系统音量。 </li><li>iOS - ALL (不支持) : 不触发此事件。 </li></ul></li></ul>
<h1 style="margin-left:0;">KeyEvent</h1>
按键事件
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>keyCode: (Number 类型 )触发按键事件的键值 键值由各系统平台定义，一些特殊按键在不同的设备上可能存在差异。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Key Example</title>
<script type="text/javascript">
// H5 plus事件处理
function plusReady(){
// 监听键按下事件
plus.key.addEventListener("keydown",function(e){
console.log("keydown: "+e.keyCode);
},false);
// 监听键松开事件
plus.key.addEventListener("keyup",function(e){
console.log("keyup: "+e.keyCode);
},false);
// 监听长按键事件
plus.key.addEventListener("longpressed",function(e){
console.log("longpressed: "+e.keyCode);
},false);
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
</script>
</head>
<body>
监听键事件 
</body>
</html>
</code></code></pre> </li><li>keyType: (KeyType 类型 )按键事件类型 用于表明触发此按键事件的类型，值为KeyType中定义的值。 </li></ul>
<h1 style="margin-left:0;">KeyEventCallback</h1>
按键事件的回调函数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void onKeyEvent( KeyEvent event ){
// Event handled code.
var key=event.keyCode; // 用户按键的键值
}
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/key.html#plus.key.KeyEvent">KeyEvent</a> ) 必选 监听用户按键操作返回的数据 可通过event的keyCode属性（String类型）获取用户按键的类型，参考KeyType类型。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

Key管理设备按键事件