UIAdaptiveInput

open addEventListener close show hide becomeFirstResponder resignFirstResponder setValue getValue insertValue setPlaceholder

论坛示例

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

概述

UIAdaptiveInput 是一个输入框，开发者可根据需求自定义其样式。该插件能巧妙的适配键盘高度，自定调整位置，始终紧贴软键盘

本插件在iOS平台上支持最低版本为 iOS9

open

打开输入框

open({parmas}, callback(ret, err))

params

rect：

  • 类型：JSON 对象
  • 描述：（可选项）插件的位置及尺寸
  • 注意：设置输入框初始高度意义不大，输入框高度会随着文本内容按照开发者预设的规则参数自适应
  • 内部字段：
{
    x: 0,   //（可选项）数字类型；插件左上角的 x 坐标（相对于所属的 Window 或 Frame）；默认：0
    y: 0,   //（可选项）数字类型；插件左上角的 y 坐标（相对于所属的 Window 或 Frame）；默认：0
    w: 320, //（可选项）数字类型；插件的宽度；默认：所属的 Window 或 Frame 的宽度
    h: 35,  //（可选项）数字类型；插件的高度（该参数仅ios有效，Android会自适应处理）；默认：35
}

styles：

  • 类型：JSON 对象
  • 描述：（可选项）插件各部分的样式
  • 内部字段：
{
    bgColor: '#fff',         //（可选项）字符串类型；输入框的背景色，支持 rgb、rgba、#；默认：'#fff'
    size: 14,                //（可选项）数字类型；输入框的文字大小；默认：14
    color: '#000',           //（可选项）字符串类型；输入框内的字体颜色，支持 rgb、rgba、#；默认：'#000'
    placeholderCcolor: '#ccc'//（可选项）字符串类型；输入框占位文字的颜色，支持 rgb、rgba、#；默认：'#ccc'
    borderColor: '#000',     //（可选项）字符串类型；边框色，支持 rgb、rgba、#；默认：'#ff0000'
    borderWidth: 0.5,         //（可选项）数字类型；边框粗细；默认：0.5
    marginBottom:10          //（可选项）数字类型；距离底部的边距；默认：0 注意：该参数仅支持android且仅在layoutInBottom为true时有效
}

adaptive：

  • 类型：JSON对象
  • 描述：（可选项）输入框自适应相关参数配置
  • 内部字段：
{
        maxLines: 1,         //（可选项）数字类型；支持最大显示行数，超过部分可上下滚动查看。优先级低于maxLength。若本参数确定的文本最大高度小于 rect->h 设置的值，则本参数无效；默认：1
        maxLength: 10,       //（可选项）数字类型；允许输入的最长字符数，优先级高于 maxLines；默认：无限制
        direction: 'down',   //（可选项）字符串类型；输入框随输入文本增加而自适应改变高度时的增加方向（该参数仅ios有效，Android系统会自适应处理）；取值范围：down、up；默认：down
        layoutInBottom:true  //（可选项）布尔类型；是否放置在底部，默认：false（该参数仅支持Android）
    minLines:1,          // (可选性) 数字类型；最少显示多少行；默认：1
    cursorPosition:'center' // (可选性) 字符串；光标显示位置；默认：center，取值范围： top -> 垂直方向居上  center -> 垂直方向居中 bottom -> 垂直方向居下 
}

placeholder：

  • 类型：字符串
  • 描述：（可选项）输入框的提示文字
  • 备注：若不传则不显示占位提示文字

autoFocus：

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

keyboardType:

  • 类型：字符串
  • 描述：（可选项）输入框获取焦点时，弹出的键盘类型；
  • 默认值：'default'
  • 注意：Android系统键盘模式为 'search'时输入框只能为单行
  • 取值范围：
    • default（默认键盘）
    • number（数字键盘）
    • search（搜索键盘）
    • next（下一项）
    • send（发送）
    • done（完成）

fixedOn：

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

fixed:

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

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    id:1,                          //数字类型；输入框的id。打开多个插件时，可用此 id 区分
    eventType: 'show'              //字符串类型；交互事件类型，
                                   //取值范围：
                                   //show（插件打开成功）
}

示例代码

 var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.open({
    rect: {
        x: 10,
        y: 10,
        w: api.winWidth-20,
        h: 40
    },
    styles: {
        size: 20,
        bgColor: '#FFB6C1',
        color: '#DC143C',
        borderColor: '#0000FF',
        placeholderColor: '#000080'
    },
    adaptive: {
        maxLines: 2,
        maxLength:1000,
        direction:'down'
    },
    placeholder:'请输入文本...',
    autoFocus: false,
    keyboardType: 'next',
    fixedOn: api.frameName,
    fixed: true
},function(ret){
    //api.alert({msg:JSON.stringify(ret)});
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

addEventListener

事件监听

注意：

  • 在 iOS 端监听 focus 事件时，键盘弹出一次在不同的系统版本和机型上会多次执行 focus 回调。设计自己的代码逻辑时请注意这一点。

  • 在 iOS 端监听 changeValue 事件时，在不同的系统版本和机型上会多次执行 changeValue 回调。设计自己的代码逻辑时请注意这一点。

  • 在 Android端键盘类型必须与监听事件名称一致，（如键盘类型为done, 则监听事件的name='done'）否则，无法监听相关事件，number 键盘类型对应的监听事件为done

addEventListener({params}, callback(ret))

params

name：

  • 类型：字符串
  • 描述：监听的事件类型
  • 取值范围：
    • focus（输入框获取、失去焦点事件）
    • changeValue（输入框内容改变）
    • changeHeight（输入框高度改变）
    • return（点击软键盘上的完成按钮）keyboardType为default时，该按钮是：换行；search：前往；next：下一项目；send：发送；done：完成

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
      id: 1,          //字符串类型；触发所监听事件的插件的ID
      focus: true     //布尔类型；仅当 name 为 focus 时返回。true：表示输入框获取焦点；false：表示失去焦点
      value:          //字符串类型；仅当 name 为 changeValue 时返回。表示当前输入框内文本内容
      height:         //数字类型；仅当 name 为 changeHeight 时返回。表示当前输入框的高度
}

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.addEventListener({
    name: 'return'
}, function() {
    alert("return");
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

close

关闭指定输入框

close({params});

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.close({
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

hide

隐藏输入框，并没有从内存里清除

hide({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.hide({
  id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

show

显示输入框

show({params});

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.show({
   id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

becomeFirstResponder

弹出键盘

becomeFirstResponder({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.becomeFirstResponder({
   id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

resignFirstResponder

隐藏键盘

resignFirstResponder({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.resignFirstResponder({
   id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setValue

设置输入框内的文字

setValue({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

value：

  • 类型：字符串
  • 描述：（可选项）要设置的输入框内的文字内容
  • 默认值：空字符串

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.setValue({
    value: '设置的文字'
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

getValue

获取当前输入框内的文字

getValue({params},callback(ret))

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

callback(ret)

ret：

  • 类型：JSON 对象
  • 内部字段：
{
    value:           // 字符串类型，获取到的当前输入框内的文字
}

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.getValue({
   id: 1
},function(ret) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    }
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

insertValue

向当前输入框内指定位置插入字符串

insertValue({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

index：

  • 类型：数字
  • 描述：（可选项）插入当前输入框内字符串的位置
  • 默认值：当前输入框内字符串的长度

value：

  • 类型：字符串
  • 描述：（可选项）要设置的输入框内的文字内容
  • 默认值：空字符串

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.insertValue({
    value: '这里是插入的字符串',
    index: 2,
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

setPlaceholder

设置占位提示文字

setPlaceholder({params})

params

id：

  • 类型：字符串
  • 描述：所操作插件的 ID

placeholder：

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

示例代码

var UIAdaptiveInput = api.require('UIAdaptiveInput');
UIAdaptiveInput.setPlaceholder({
    placeholder: '我是占位提示文字',
    id: 1
});

可用性

iOS系统，Android系统

可提供的1.0.0及更高版本

论坛示例

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

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24