input

解释：输入框

属性名类型默认值说明
valueString-输入框的初始内容。若要动态设置输入框内容，需设置 value="{= value =}"
typeStringtextinput 的类型
passwordBooleanfalse是否是密码类型
placeholderString-输入框为空时占位符
placeholder-styleString-placeholder 的样式
placeholder-classStringinput-placeholderplaceholder 的样式类
disabledBooleanfalse是否禁用
maxlengthNumber140最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacingNumber0指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focusBooleanfalse获取焦点
confirm-typeStringdone设置键盘右下角按钮的文字
confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起
cursorNumber-指定 focus 时的光标位置
selection-startNumber-1光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 百度 APP 10.10 以上
selection-endNumber-1光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 百度 APP 10.10 以上
adjust-positionBooleantrue键盘弹起时，是否自动上推页面 百度 APP 10.10 以上
bindinputEventHandle-当键盘输入时，触发 input 事件，event.detail = {value, cursor}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocusEventHandle-输入框聚焦时触发，event.detail = {value: value}
bindblurEventHandle-输入框失去焦点时触发，event.detail = {value: value}
bindconfirmEventHandle-点击完成按钮时触发，event.detail = {value: value}

type 有效值：

值说明
text文本输入键盘
number数字输入键盘
digit带小数点的数字键盘

confirm-type 有效值：

值说明
send右下角按钮为 “发送”
search右下角按钮为 “搜索”
next右下角按钮为 “下一个”
go右下角按钮为 “前往”
done右下角按钮为 “完成”

示例：在开发者工具中预览效果

  1. <!-- input.swan -->
    <view class="section">
        <input value="{=value=}" maxlength="20" placeholder="最大输入长度20" />
    </view>

说明：

  • confirm-type 的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持；
  • input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family；
  • 在 input 聚焦期间，避免使用 css 动画。

  • placeholder 的样式暂时只支持设置 font-size、font-weight、color 。
    BUG：

    在 iOS 端键盘弹起时会出现组件 bindtap 不生效的问题（部分场景，如：IM 聊天场景中的固定在页面底部的文本框与发送按钮），建议先使用 bindtouchstart 代替 bindtap。