UIInputBox

close hide closeBoard closeKeyboard insertValue setPlaceholder

模块概述

UIInputBox 模块是一个聊天输入框模块，开发者可自定义该输入框的功能。通过 open 接口可在当前 window 底部打开一个输入框，该输入框的生命属于当前 window 所有。当输入框获取焦点后，会自动弹动到软键盘之上。开发者可通过监听输入框距离底部弹动的高度，来改变聊天对话界面的高度。

本模块的主要功能有：

1，自定义表情集：open 接口的 emotionPath 参数

2，自定义输入框最大自适应高度：open 接口的 maxRows 参数

3，输入框占位提示文字：open 接口的 placeholder 参数

4，手动弹出、关闭软键盘功能

5，输入框插入、获取当前文本

open

打开聊天输入框

open({parmas}, callback(ret))

params

placeholder：

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

autoFocus：

  • 类型：布尔
  • 描述：（可选项）输入框是否自动获取焦点，并弹出键盘
  • 默认值：false

maxRows：

  • 类型：数字
  • 描述：（可选项）输入框显示的最大行数（高度自适应）
  • 默认值：4

emotionPath：

  • 类型：字符串
  • 描述：自定义表情文件夹（表情图片所在的文件夹，须同时包含一个与该文件夹同名的配置文件）的路径（本地路径，fs://、widget://）。.json文件内的 name 值必须与表情文件夹内表情图片名对应。另附：
  • .json配置文件格式如下：
  • .json配置文件所在目录：

inputBoxSend：

  • 类型：JSON 对象
  • 描述：输入框右侧发送按钮设置；本参数对 iOS 平台上的键盘内发送按钮无效
  • 内部字段：
  1. {   
  2.         normalBg: '#4cc518',            //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：#4cc518
  3.         titleColor: '#ffffff',          //（可选项）字符串类型；发送按钮标题颜色；默认：#ffffff
  4.         activeBg: '#46a91e',            //（可选项）字符串类型；发送按钮点击背景颜色，支持 rgb、rgba、#、img；默认：无
  5.         titleSize: 13,                  //（可选项）数字类型；发送按钮标题字体大小；默认：13
  6.         title:'发送',                    //(可选项) 字符串类型；发送按钮的title
  7.         sendW:50 ,                      //（可选项）数字类型；发送按钮宽；默认：50， android固定为：40
  8.         sendH:30 ,                      //（可选项）数字类型；发送按钮高；默认：30， android固定为：32
  9.         sendCorner:5                    //（可选项）数字类型；发送按钮圆角度；默认：5          
  11.  }

isHiddenSend：

  • 类型：布尔类型
  • 描述：是否隐藏输入框右边的发送按钮
  • 默认：false

styles：

  • 类型：JSON 对象
  • 描述：模块各部分的样式集合
  • 内部字段：
  1. {  
  2.     topDivider:{                        //(可选项)顶部分割线配置
  3.     color:'#000'                    //(可选项)顶部分割线的颜色；默认：#000 ;支持图片设置(fs:// & widget://)
  4.     },
  5.     inputBar:{                          //（可选项）JSON对象；输入区域（输入框及两侧按钮）整体样式      
  6.         borderColor: '#d9d9d9',         //（可选项）字符串类型；输入框区域上下边框的颜色，支持 rgb，rgba，#；默认：'#d9d9d9'
  7.         bgColor: '#f2f2f2',             //（可选项）字符串类型；输入框区域的整体背景色，支持 rgb，rgba，#；默认：'#f2f2f2'
  8.     textColor:'#000',               //（可选项）字符串类型；输入文字的颜色；默认：#000
  9.     textSize:16,                    //（可选项）数字类型；默认：16
  10.     textMarginLeft:5                //（可选项）数字类型；光标距离左边框的距离，默认：5
  11.     },
  12.     inputBox: {                         //（可选项）JSON对象；输入框样式
  13.         borderColor: '#B3B3B3',         //（可选项）字符串类型；输入框的边框颜色，支持 rgb，rgba，#；默认：'#B3B3B3'
  14.         bgColor: '#f2f2f2',             //（可选项）字符串类型；输入框的背景色，支持 rgb，rgba，#；默认：'#f2f2f2'
  15.         boardBgColor: '#f2f2f2',        //（可选项）字符串类型；面板的背景色(表情面板，附加面板)，支持 rgb，rgba，#；默认：'#f2f2f2'
  16.         topMargin:10,                   //（可选项）数字类型；输入框距离顶部的边距；默认：10
  17.          borderCorner:5,                 //(可选项)数字类型；默认：5
  18.     },
  19.     emotionBtn: {                       //（可选项）JSON对象；表情按钮样式；不传则不显示表情按钮
  20.         normalImg: 'widget://'          //（可选项）字符串类型；表情按钮常态的背景图片（本地路径，fs://、widget://）；默认：笑脸小图标,
  21.     },
  22.     keyboardBtn: {                      //JSON对象；键盘按钮样式
  23.         normalImg: 'widget://'          //字符串类型；键盘按钮常态的背景图片（本地路径，fs://、widget://）；默认：键盘小图标
  24.     },
  25.     indicator: {                        //（可选项）JSON对象；表情面板的小圆点指示器样式，若不传则不显示该指示器
  26.         color: '#c4c4c4',               //（可选项）字符串类型；指示器颜色；支持 rgb、rgba、#；默认：'#c4c4c4'
  27.         activeColor: '#9e9e9e'          //（可选项）字符串类型；当前指示器颜色；支持 rgb、rgba、#；默认：'#9e9e9e'
  28.     },
  29.     sendBtn: {                         //（可选项）JSON对象；表情面板发送按钮样式，本参数对 iOS 平台上的键盘内发送按钮无效**改参数对安卓无效**
  30.         bg: '#4cc518',                 //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：#4cc518
  31.         titleColor: '#ffffff',          //（可选项）字符串类型；发送按钮标题颜色；默认：#ffffff
  32.         activeBg: '#46a91e',            //（可选项）字符串类型；发送按钮背景颜色，支持 rgb、rgba、#、img；默认：无
  33.         titleSize: 13,                  //（可选项）数字类型；发送按钮标题字体大小；默认：13
  34.         sendTitle:'发送'                 //(可选项) 字符串类型；发送按钮的title
  36. }

isShowLeftEmotionBtn:

  • 类型：布尔
  • 描述：（可选项）表情按钮是否在左侧显示
  • 默认：false

isShowSendBtn：

  • 类型：布尔
  • 描述：（可选项）表情键盘上的发送按钮是否显示 注意:本参数对 iOS 平台上的键盘内发送按钮无效 ，该参数仅支持iOS
  • 默认：true

isClose：

  • 类型：布尔值
  • 描述：（可选项）点击空白区域是否关闭整个模块(包括键盘)
  • 默认：false

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     eventType: 'show',  //字符串类型；回调的事件类型，
  3.                         //取值范围：
  4.                         //show（该模块打开成功）
  5.                         //send（用户点击发送按钮）
  6.     msg: ''             //字符串类型；当 eventType 为 send 时，此参数返回输入框的内容，否则返回 undefined
  7.     inputBarHeight:30   //数字类型；输入框及左右按钮整体区域的高度
  8. }

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.open({
  3.     placeholder: '',
  4.     maxRows: 4,
  5.     emotionPath: 'widget://res/img/emotion',
  7.     styles: {
  8.         inputBar: {
  9.             borderColor: '#d9d9d9',
  10.             bgColor: '#f2f2f2'
  11.         },
  12.         inputBox: {
  13.             borderColor: '#B3B3B3',
  14.             bgColor: '#FFFFFF'
  15.         },
  16.         emotionBtn: {
  17.             normalImg: 'widget://res/img/chatBox_face1.png'
  18.         },
  19.         keyboardBtn: {
  20.             normalImg: 'widget://res/img/chatBox_key1.png'
  21.         },
  22.         indicator: {
  23.             color: '#c4c4c4',
  24.             activeColor: '#9e9e9e'
  25.         },
  26.         sendBtn: {
  27.             titleColor: '#4cc518',
  28.             activeBg: '#46a91e',
  29.             titleSize: 14
  30.         }
  31.     }
  33. }, function(ret, err) {
  34.     if (ret) {
  35.         alert(JSON.stringify(ret));
  36.     } else {
  37.         alert(JSON.stringify(err));
  38.     }
  39. });

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

close()

示例代码

  2. UIInputBox.close();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏聊天输入框

hide()

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.hide();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupKeyboard

弹出键盘

popupKeyboard()

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.popupKeyboard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeKeyboard

收起键盘

closeKeyboard()

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.closeKeyboard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

popupBoard

弹出表情

popupBoard()

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.popupBoard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

closeBoard

收起表情

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.closeBoard();

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

value

获取或设置聊天输入框的内容

value({params}, callback(ret))

params

msg：

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. //设置输入框的值
  3. UIInputBox.value({
  4.     msg: '设置输入框的值'
  5. });
  7. //获取输入框的值
  8. UIInputBox.value(function(ret, err) {
  9.     if (ret) {
  10.         alert(JSON.stringify(ret));
  11.     } else {
  12.         alert(JSON.stringify(err));
  13.     }
  14. });

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

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

insertValue({params})

params

index：

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

msg：

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

示例代码

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

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听 （输入区域，输入框及两侧按钮区域）

addEventListener(callback(ret))

params

name：

  • 类型：字符串
  • 描述：监听的事件类型

  • 取值范围：

    1.   - move（输入框所在区域弹动事件）
    2.   - change（输入框所在区域高度改变）
    3.   - showEmotion（用户点击表情按钮）
    4.   - valueChanged（输入框内容改变事件）

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
  1. {
  2.     inputBarHeight: 60,    //数字类型；输入框及左右按钮整体区域的高度，仅当监听 inputBar 的 move 和 change 事件时本参数有值
  3.     panelHeight: 300 ,     //数字类型；输入框下边缘距离屏幕底部的高度，仅当监听 inputBar 的 move 和 change 事件时本参数有值
  4.     value: ''              //字符串类型；输入框当前内容，仅当 target 为 inputBar name 为 valueChanged 时有值
  5. }

示例代码

  2. var UIInputBox = api.require('UIInputBox');
  3. UIInputBox.addEventListener({
  4.  name: 'showEmotion'
  5. }, function(ret, err) {
  6.     if (ret) {
  7.         alert(JSON.stringify(ret));
  8.     } else {
  9.         alert(JSON.stringify(err));
  10.     }

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setPlaceholder

重设聊天输入框的占位提示文本

setPlaceholder({params})

params

placeholder：

  • 类型：字符串
  • 描述：（可选项）占位提示文本，若不传或传空则表示清空占位提示内容

示例代码

可用性

可提供的1.0.0及更高版本