UIInputBox

来自于:APICloud 官方立即使用

open close show hide popupBoard closeBoard popupKeyboard closeKeyboard value insertValue addEventListener 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:

  • 类型:字符串
  • 描述:自定义表情文件夹(表情图片所在的文件夹,须同时包含一个与该文件夹同名的.json配置文件)的路径(本地路径,fs://、widget://)。.json文件内的 name 值必须与表情文件夹内表情图片名对应。另附:表情文件夹资源示例
  • .json配置文件格式如下:
  1. [
  2. {'name': 'Expression_1', 'text': '[微笑]'},
  3. {'name': 'Expression_2', 'text': '[撇嘴]'}
  4. ]
  • .json配置文件所在目录:

emotionPath

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
  10. }

isHiddenSend:

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

styles:

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

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',
  6. styles: {
  7. inputBar: {
  8. borderColor: '#d9d9d9',
  9. bgColor: '#f2f2f2'
  10. },
  11. inputBox: {
  12. borderColor: '#B3B3B3',
  13. bgColor: '#FFFFFF'
  14. },
  15. emotionBtn: {
  16. normalImg: 'widget://res/img/chatBox_face1.png'
  17. },
  18. keyboardBtn: {
  19. normalImg: 'widget://res/img/chatBox_key1.png'
  20. },
  21. indicator: {
  22. color: '#c4c4c4',
  23. activeColor: '#9e9e9e'
  24. },
  25. sendBtn: {
  26. titleColor: '#4cc518',
  27. bg: '#999999',
  28. activeBg: '#46a91e',
  29. titleSize: 14
  30. }
  31. }
  32. }, function(ret, err) {
  33. if (ret) {
  34. alert(JSON.stringify(ret));
  35. } else {
  36. alert(JSON.stringify(err));
  37. }
  38. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭聊天输入框

close()

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示聊天输入框

show()

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.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

收起表情

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. {
  2. status: true, //布尔型;true||false
  3. msg: '' //字符串类型;输入框当前内容文本
  4. }

示例代码

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

可用性

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. }

示例代码

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

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setPlaceholder

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

setPlaceholder({params})

params

placeholder:

  • 类型:字符串
  • 描述:(可选项)占位提示文本,若不传或传空则表示清空占位提示内容

示例代码

  1. var UIInputBox = api.require('UIInputBox');
  2. UIInputBox.setPlaceholder({
  3. placeholder: '修改了占位提示内容'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本