UIInput

来自于：APICloud 官方立即使用

open resetPosition close show hide value insertValue popupKeyboard closeKeyboard addEventListener getSelectedRange

论坛示例

为帮助用户更好更快的使用模块，论坛维护了一个示例，示例中包含示例代码、知识点讲解、注意事项等，供您参考。

模块概述

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

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

模块效果图如下：

UIInput - 图1

本模块源码已开源，地址为：https://github.com/apicloudcom/UIInput

模块接口

注意：

1，在 iOS 上如果 open 窗口时候加了延迟，则该模块被打开时即便 autoFocus 为 true 也不会弹出键盘，会出现弹出键盘然后又缩回去的现象。该问题的解决方法是去掉延迟；

2，由于输入法的关系，当 autoFocus 为 true 时部分 android 机型上默认弹不出键盘

3，android光标样式配置：

  • 需要下载自定义模块 UIInputCursorStyle
  • 解压后在 目录UIInputCursorStyle 下找到 res_UIInputCursorStyle\res\drawable\uiinput_text_cusor_drawable.xml文件
  • 打开文件后可在 android:color=”#ff00ff00” 处配置（注意#后面是8个字符，前两个字符（16进制表示0~255）表示透明度，剩下后六位分别表示 r,g,b）光标颜色，可在 android:width=”5dp”处设置光标的宽度

open

打开输入框，注意：调用 open 接口的元素，不能加 tapmode 属性

open({params}, callback(ret))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置及尺寸
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4.     w: 320, //（可选项）数字类型；模块的宽度；默认：所属的 Window 或 Frame 的宽度
  5.     h: 40   //（可选项）数字类型；模块的高度；默认：40
  6. }

styles：

  • 类型：JSON 对象
  • 描述：（可选项）模块各部分的样式
  • 内部字段：
  1. {
  2.     bgColor: '#fff',        //（可选项）字符串类型；输入框的背景色，支持 rgb、rgba、#；默认：'#fff'
  3.     size: 14,               //（可选项）数字类型；输入框的文字大小；默认：14
  4.     color: '#000',          //（可选项）字符串类型；输入框内的字体颜色，支持 rgb、rgba、#；默认：'#000'
  5.     cursorColor: '#4169E1',  //（可选项）字符串类型；输入框内的光标颜色，支持 rgb、rgba、#；默认：'#4169E1'（该参数仅对ios有效，需要配置android的光标样式可参考 **模块接口** 说明）
  6.     placeholder: {
  7.         color: '#ccc'       //（可选项）字符串类型；输入框占位文字的颜色；默认：'#ccc'
  8.     }
  9. }

maxRows：

  • 类型：数字
  • 描述：（可选项）支持显示最大行数，文本内容超过此行数时，上下滚动显示。是否支持换行，传大于1的数时表示支持，注意：取值大于1（多行显示时），不触发 search 事件回调
  • 默认值：1

maxStringLength：

  • 类型：数字
  • 描述：（可选项）输入框允许输入的最大字符串长度
  • 默认值：无限制

autoFocus：

  • 类型：布尔
  • 描述：（可选项）打开时是否弹出键盘
  • 默认值：true

placeholder：

  • 类型：字符串
  • 描述：（可选项）输入框的占位提示文本

keyboardType:

  • 类型：字符串
  • 描述：（可选项）输入框获取焦点时，弹出的键盘类型；
  • 默认值：’default’
  • 取值范围：
    • default（默认键盘）
    • number（数字键盘）
    • search（搜索键盘，Android只有在单行模式下支持）
    • next（下一项，Android只有在单行模式下支持）
    • send（发送，Android只有在单行模式下支持）
    • done（完成，Android只有在单行模式下支持）
    • decimal（带有数字和小数点的键盘，仅支持iOS）

alignment:

  • 类型：字符串
  • 描述：（可选项）文本对齐方式
  • 默认值：’left’
  • 取值范围：
    • left（居左对齐）
    • center（居中对齐）
    • right（居右对齐）

isCenterVertical:

  • 类型：布尔类型
  • 描述：输入文本是否上下居中
  • 默认：true

inputType:

  • 类型：字符串
  • 描述：(可选项) 判断输入框输入的是密码还是文字
  • 默认值：’text’
  • 取值范围：
    • password：(密码) 仅当maxRows = 1时支持,
    • text：(文字)

fixedOn：

  • 类型：字符串类型
  • 描述：（可选项）模块视图添加到指定 frame 的名字（只指 frame，传 window 无效）
  • 默认：模块依附于当前 window

fixed:

  • 类型：布尔
  • 描述：（可选项）模块是否随所属 window 或 frame 滚动
  • 默认值：true（不随之滚动）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     id:1,                          //数字类型；输入框的id
  3.     eventType: 'show'              //字符串类型；交互事件类型，
  4.                                    //取值范围：
  5.                                    //show（模块打开成功）
  6.                                    //change（输入框内容改变）
  7.                                    //search（点击键盘的搜索按钮）
  8.                                    //send（点击键盘的发送按钮，暂仅支持ios平台）
  9.                                    //done（点击键盘的确定按钮，暂仅支持ios平台）
  10. }

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.open({
  3.     rect: {
  4.         x: 0,
  5.         y: 0,
  6.         w: api.winWidth,
  7.         h: 40
  8.     },
  9.     styles: {
  10.         bgColor: '#fff',
  11.         size: 14,
  12.         color: '#000',
  13.         placeholder: {
  14.             color: '#ccc'
  15.         }
  16.     },
  17.     autoFocus: false,
  18.     maxRows: 4,
  19.     placeholder: '这是一个输入框',
  20.     keyboardType: 'number',
  21.     fixedOn: api.frameName
  22. }, function(ret) {
  23.     if (ret.eventType == 'change') {
  24.     } else {
  25.         alert(JSON.stringify(ret));
  26.     }
  27. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

resetPosition

重设输入框的位置

resetPosition({params})

params

id：

  • 类型：数字类型
  • 描述：需要设置的输入框id

position：

  • 类型：JSON 对象
  • 描述：（可选项）模块的位置
  • 内部字段：
  1. {
  2.     x: 0,   //（可选项）数字类型；模块左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
  3.     y: 0,   //（可选项）数字类型；模块左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
  4. }

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.resetPosition({
  3.     position: {
  4.         x: 100,
  5.         y: 100
  6.     },
  7.     id:2
  8. });

可用性

iOS系统，Android系统

可提供的1.0.8及更高版本

close

关闭输入框

close({params})

Params

id：

  • 类型：数字类型
  • 描述：需要关闭的输入框id

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.close({
  3.     id:0
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示输入框

show({params})

Params

id：

  • 类型：数字类型
  • 描述：需要展示的输入框id

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.show({
  3.     id:0
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏输入框

hide({params})

Params

id：

  • 类型：数字类型
  • 描述：需要隐藏的输入框id

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.hide({
  3.     id:0
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

value

获取或设置输入框的内容

value({params}, callback(ret))

params

id：

  • 类型：数字类型
  • 描述：输入框id

msg：

  • 类型：字符串
  • 描述：（可选项）输入框的内容，若不传则返回输入框的值

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     msg: ''              //字符串类型；输入框当前内容文本
  3. }

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.value({
  3.     msg: '设置输入框的值'
  4. });
  6. UIInput.value(function(ret) {
  7.     if (ret) {
  8.         alert(JSON.stringify(ret));
  9.     }
  10. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

向输入框的指定位置插入内容

insertValue({params})

params

id：

  • 类型：数字类型
  • 描述：输入框id

index：

  • 类型：数字
  • 描述：（可选项）插入内容的起始位置。注意：中文，全角符号均占一个字符长度；索引从0开始，0表示插入到最前面，1表示插入到第一个字符后面，2表示插入到第二个字符后面，以此类推。
  • 默认值：当前输入框的值的长度

msg：

  • 类型：字符串
  • 描述：（可选项）要插入的内容
  • 默认值：’’

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.insertValue({
  3.     index: 10,
  4.     msg: '这里是插入的字符串'
  5. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard({params})

Params

id：

  • 类型：数字类型
  • 描述：输入框id

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.popupKeyboard({
  3.     id:0
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard({params})

Params

id：

  • 类型：数字类型
  • 描述：输入框id

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.closeKeyboard({
  3.     id:0
  4. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听

addEventListener({params}, callback(ret))

params

id：

  • 类型：数字类型
  • 描述：输入框id

name：

  • 类型：字符串
  • 描述：监听的事件类型
  • 取值范围：
    • becomeFirstResponder（输入框获得焦点事件）
    • resignFirstResponder（输入框失去焦点事件）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.       keyboardHeight:216     //数字类型；本参数仅当当 name 为 becomeFirstResponder 时有效，表示弹出的键盘高度
  3. }

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.addEventListener({
  3.     name: 'resignFirstResponder'
  4. }, function(ret) {
  5.     alert("输入框失去焦点！");
  6. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getSelectedRange

获取当前光标所在位置

getSelectedRange({params},callback(ret))

params

id：

  • 类型：数字类型
  • 描述：输入框id

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.       location:0,    //数字类型；光标位置
  3. }

示例代码

  1. var UIInput = api.require('UIInput');
  2. UIInput.getSelectedRange({
  3.  id: 0
  4. }, function(ret) {
  5.  alert(JSON.stringify(ret));
  6. });

可用性

iOS系统，Android系统

可提供的1.0.9及更高版本