apicloud apicloud

注册
查看: 7015|回复: 14

[模块教程] UIInput 输入框模块效果展示

管理员

UID:253705

主题:
53
帖子:
460
云币:
856

[模块教程] UIInput 输入框模块效果展示

7015 14 | 发表于 2018-8-11 19:53:41 |阅读模式 | |
本帖最后由 uoaccw 于 2018-12-28 20:41 编辑

模块概述
某些 App 具有打开某一页面即可默认弹出键盘的功能,如某些登陆授权、评论页面。但是一个纯 html 的输入框标签,无法实现这一功能。为满足 APICloud 平台开发者对这一功能的需求,特推出了 UIInput 模块。

UIInput 是一个输入框模块,开发者可通过配置相应参数来控制输入框自动获取焦点,并弹出键盘。同普通的 UI 类的模块一样,本模块也可通过 rect 来设置其位置和大小,通过 styles参数设置其样式。为增强输入框功能,模块开放了 keyboardType 参数,开发者可通过设置该参数来控制其键盘类型。

模块文档地址:

https://docs.apicloud.com/Client-API/UI-Layout/UIInput

demo效果图:


附件为widget形式代码包。


  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>title</title>
  8.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  9.     <link rel="stylesheet" type="text/css" href="../css/aui.css" />
  10.     <style>
  11.         html,
  12.         body {
  13.             background-color: #fff;
  14.         }

  15.         .content {
  16.             height: 300px;
  17.             width: 100%;
  18.         }

  19.         .login {
  20.             margin-top: 10px;
  21.         }
  22.     </style>
  23. </head>

  24. <body>


  25.     <div class="content">

  26.     </div>
  27.     <ul class="aui-list aui-form-list">
  28.         <li id='inputusername' class="aui-list-item">
  29.             <div class="aui-list-item-inner">
  30.                 <div class="aui-list-item-label-icon">
  31.                     <i class="aui-iconfont aui-icon-mobile"></i>
  32.                 </div>
  33.                 <div class="aui-list-item-input">

  34.                 </div>
  35.                 <div tapmode class="aui-list-item-label-icon" onclick="fnclear()">
  36.                     <i class="aui-iconfont aui-icon-close"></i>
  37.                 </div>
  38.             </div>
  39.         </li>
  40.         <li id='inputpassword' class="aui-list-item">
  41.             <div class="aui-list-item-inner">
  42.                 <div class="aui-list-item-label-icon">
  43.                     <i class="aui-iconfont aui-icon-lock"></i>
  44.                 </div>
  45.                 <div class="aui-list-item-input">

  46.                 </div>

  47.             </div>
  48.         </li>
  49.     </ul>
  50.     <div tapmode class="aui-btn aui-btn-block  login" onclick="fnlogin()">登录</div>
  51. </body>
  52. <script type="text/javascript" src="../script/api.js"></script>
  53. <script type="text/javascript">
  54.     var winH; //window窗口的高
  55.     var eleinputusername = $api.byId('inputusername');
  56.     var eleinputpassword = $api.byId('inputpassword');
  57.     var y = $api.offset(eleinputusername).t + 7; //定位手机号输入框的位置y
  58.     var y2 = $api.offset(eleinputpassword).t + 7; //定位密码输入框的位置y
  59.     var passWordTop; //计算密码框底部到屏幕底部的距离
  60.     var UIInput;
  61.     apiready = function() {
  62.         winH = api.winHeight;
  63.         passWordTop = winH - $api.offset(eleinputpassword).t - $api.offset(eleinputpassword).h;
  64.         UIInput = api.require('UIInput');
  65.         UIInput_open();
  66.         UIInput_open2();
  67.     }

  68.     function UIInput_open() {
  69.         UIInput.open({
  70.             rect: {
  71.                 x: 44,
  72.                 y: y,
  73.                 w: api.winWidth - 88,
  74.                 h: 30
  75.             },
  76.             styles: {
  77.                 bgColor: '#fff',
  78.                 size: 14,
  79.                 color: '#000',
  80.                 placeholder: {
  81.                     color: '#ccc'
  82.                 }
  83.             },
  84.             autoFocus: false,
  85.             maxRows: 1,
  86.             placeholder: '请输入手机号',
  87.             keyboardType: 'number',
  88.             inputType: 'text',
  89.             fixedOn: api.frameName,
  90.             fixed: false
  91.         }, function(ret, err) {
  92.             if (ret) {
  93.                 console.log(JSON.stringify(ret));
  94.                 id = ret.id;
  95.                 UIInput.addEventListener({
  96.                     id: id,
  97.                     name: 'resignFirstResponder'
  98.                 }, function() {

  99.                 });
  100.                 UIInput.addEventListener({
  101.                     id: id,
  102.                     name: 'becomeFirstResponder'
  103.                 }, function(ret) {
  104.                     //console.log("输入框获得焦点!" + api.winHeight + ret.keyboardHeight);
  105.                     if (ret.keyboardHeight) {
  106.             if(api.systemType == 'android' || api.systemType == 'Android'){
  107.                             fnscoll(ret.keyboardHeight);
  108.                         }
  109.                     }
  110.                 });
  111.             }
  112.         });
  113.     }

  114.     function UIInput_open2() {
  115.         var UIInput = api.require('UIInput');
  116.         UIInput.open({
  117.             rect: {
  118.                 x: 44,
  119.                 y: y2,
  120.                 w: api.winWidth - 88,
  121.                 h: 30
  122.             },
  123.             styles: {
  124.                 bgColor: '#fff',
  125.                 size: 14,
  126.                 color: '#000',
  127.                 placeholder: {
  128.                     color: '#ccc'
  129.                 }
  130.             },
  131.             autoFocus: false,
  132.             maxRows: 1,
  133.             placeholder: '请输入密码',
  134.             keyboardType: 'default',
  135.             inputType: 'password',
  136.             fixedOn: api.frameName,
  137.             fixed: false
  138.         }, function(ret, err) {
  139.             if (ret) {
  140.                 console.log(JSON.stringify(ret));
  141.                 id2 = ret.id;
  142.                 UIInput.addEventListener({
  143.                     id: id2,
  144.                     name: 'resignFirstResponder'
  145.                 }, function() {
  146.                     console.log("输入框失去焦点!");
  147.                 });
  148.                 UIInput.addEventListener({
  149.                     id: id2,
  150.                     name: 'becomeFirstResponder'
  151.                 }, function(ret) {
  152.                     console.log("输入框获得焦点!" + api.winHeight + ret.keyboardHeight);
  153.                     if (ret.keyboardHeight) {
  154.                         if(api.systemType == 'android' || api.systemType == 'Android'){
  155.                             fnscoll(ret.keyboardHeight);
  156.                         }
  157.                     }
  158.                 });
  159.             }
  160.         });
  161.     }


  162.     function UIInput_value(oneid) {
  163.         UIInput.value({
  164.             id: oneid
  165.         }, function(ret, err) {
  166.             if (ret) {
  167.                 console.log(JSON.stringify(ret));
  168.             }
  169.         });
  170.     }

  171.     function closeUIIput(id) {
  172.         UIInput.close({
  173.             id: id
  174.         });
  175.     }

  176.     //滚动页面防止被键盘遮挡,仅Android需要
  177.     function fnscoll(L) {
  178.         console.log(L + ':' + passWordTop);
  179.         if (L > passWordTop) {
  180.             document.body.scrollTop = L - passWordTop; //滚动距离=键盘高度-密码框距屏幕底部距离
  181.         }
  182.     }

  183.     function fnclear() {
  184.         UIInput.value({
  185.             id: id,
  186.             msg: ''
  187.         }, function(ret, err) {
  188.             if (ret) {
  189.                 console.log(JSON.stringify(ret));
  190.             }
  191.         });
  192.     }

  193.     function fnlogin() {
  194.         UIInput_value(id);
  195.         UIInput_value(id2);
  196.     }
  197. </script>

  198. </html>

复制代码



本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

驾校小白

UID:540106

主题:
3
帖子:
11
云币:
12
发表于 2018-10-14 11:49:19 |
赞 刚好很需要这个

驾校小白

UID:678949

主题:
18
帖子:
59
云币:
77
发表于 2018-11-28 10:39:36 |
我初始化了,但没有显示,自动弹出也没用,弹出了,点下输入框的位置,有隐藏了

马路杀手

UID:162645

主题:
56
帖子:
260
云币:
351
发表于 2019-1-3 09:22:37 |
大佬,在吗?我安卓没配置也没有被键盘遮挡。但是IOS会。。。IOS被键盘遮挡怎么解决?

驾校小白

UID:438252

主题:
5
帖子:
23
云币:
21
发表于 2019-2-22 17:37:59 |
keyboardType:

类型:字符串
描述:(可选项)输入框获取焦点时,弹出的键盘类型;
默认值:'default'
取值范围:
default(默认键盘)
number(数字键盘)
search(搜索键盘,Android只有在单行模式下支持)
next(下一项,Android只有在单行模式下支持)
send(发送,Android只有在单行模式下支持)
done(完成,Android只有在单行模式下支持)

请教管理员一下,next怎么用?想用这个,但是点击没有任何反馈,怎么处理呢?

驾校小白

UID:438252

主题:
5
帖子:
23
云币:
21
发表于 2019-2-23 08:50:26 |
顶一下,怎么没有人回呢?

主题:
3
帖子:
16
云币:
19
发表于 2019-9-10 14:38:17 |
其实我想问下的是,这怎么让uiinput在密码状态上,有默认值

驾校小白

UID:149932

主题:
16
帖子:
35
云币:
102
发表于 2019-9-16 15:27:33 |
谢谢 正在找这个

官方版主

UID:791056

主题:
9
帖子:
17946
云币:
5594
发表于 2019-11-12 15:51:40 |
vitals 发表于 2019-2-22 17:37
keyboardType:

类型:字符串

eventType: 'show'              //字符串类型;交互事件类型,
                                   //取值范围:
                                   //show(模块打开成功)
                                   //change(输入框内容改变)
                                   //search(点击键盘的搜索按钮)
                                   //send(点击键盘的发送按钮,暂仅支持ios平台)
                                   //done(点击键盘的确定按钮,暂仅支持ios平台)
这是有回调的类型

主题:
3
帖子:
10
云币:
13
发表于 2019-11-29 17:14:53 |
那个右边清除输入的小叉叉怎么调出来
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表