UIAdaptiveInput

论坛示例

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

概述

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/10/10