input 输入框

解释：输入框，v3.105.0 开始支持同层渲染input 输入框 - 图1。

属性说明

属性名类型默认值必填说明Web 态说明
valueString否输入框的初始内容。若要动态设置输入框内容，需设置 value="{= value =}"(注: 若要取键盘输入后的value请通过bindinput获取)-
typeStringtext否input 的类型-
passwordBooleanfalse否是否是密码类型-
placeholderString否输入框为空时占位符-
placeholder-styleString否placeholder 的样式-
placeholder-classStringinput-placeholder否placeholder 的样式类-
disabledBooleanfalse否是否禁用-
maxlengthNumber140否最大输入长度，设置为 -1 的时候不限制最大长度-
cursor-spacingNumber0否指定光标与键盘的距离，单位 px。 当键盘弹出时， 如果需要页面上滑才能完整显示input组件, 那么此时光标与键盘的距离为设定的cursor-spacing值； 如果input组件处于屏幕上方，键盘弹出时不会挡住input， 则忽略该属性。受限于设备系统，暂不支持
focusBooleanfalse否获取焦点，调起键盘。 开发者工具暂不支持自动获取焦点-
confirm-typeStringdone否设置键盘右下角按钮的文字暂不支持
confirm-holdBooleanfalse否点击键盘右下角按钮时是否保持键盘不收起-
cursorNumber否指定 focus 时的光标位置开发者工具暂不支持-
selection-startNumber-1否光标起始位置，自动聚焦时有效，需与 selection-end 搭配使用-
selection-endNumber-1否光标结束位置，自动聚焦时有效，需与 selection-start 搭配使用-
adjust-positionBooleantrue否键盘弹起时，是否自动上推页面-
bindinputEventHandle否当键盘输入时，触发 input 事件，event.detail = {value, cursor, keyCode}，keyCode为键值。-
bindfocusEventHandle否输入框聚焦时触发，event.detail = {value: value, height: height}, height为键盘高度-
bindblurEventHandle否输入框失去焦点时触发，event.detail = {value: value}-
bindconfirmEventHandle否点击完成按钮时触发，event.detail = {value: value}-

type 有效值

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

confirm-type 有效值

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

示例

在开发者工具中预览效果

扫码体验

input 输入框 - 图2请使用百度APP扫码

代码示例1 - 基础用法 ：

在开发者工具中预览效果

  2. <view class="wrap">
  3.     <view class="card-area">
  4.         <view class="top-description border-bottom">基础用法</view>
  5.         <input class="ipt" placeholder="请在此输入标题"/>
  6.     </view>
  7. </view>

代码示例2 - 自定义输入控制 ：

在开发者工具中预览效果

  2. <view class="wrap">
  3.     <view class="card-area">
  4.         <view class="top-description border-bottom">自定义输入控制</view>
  5.         <view class="list-area border-bottom">
  6.             <view class="list-item-key-4">自动聚焦</view>
  7.             <view class="list-item-value">
  8.                 <input bindfocus="bindKeyfocus" selection-start="3" placeholder="focus='true'" selection-end="7" focus={{true}} confirm-hold="false" confirm-type="send"/>
  9.             </view>
  10.         </view>
  12.         <view class="list-area border-bottom">
  13.             <view class="list-item-key-4">控制长度</view>
  14.             <view class="list-item-value">
  15.                 <input cursor='100' bindblur="bindKeyblur"  bindconfirm="bindKeyconfirm" placeholder="maxlength='10'" maxlength="10"/>
  16.             </view>
  17.         </view>
  19.         <view class="list-area border-bottom">
  20.             <view class="list-item-key-4">禁用</view>
  21.             <view class="list-item-value">
  22.                 <input disabled="true" placeholder="disabled='true'"/>
  23.             </view>
  24.         </view>
  26.         <view class="list-area">
  27.             <view class="list-item-key-4">带有内容</view>
  28.             <view class="list-item-value">
  29.                 <input value="value='{= value =}'"/>
  30.             </view>
  31.         </view>
  32.     </view>
  33. </view>
  1. Page({
  2.     data: {
  3.         inputValue: '',
  4.         autoFocus: true,
  5.         value: '初始value值'
  6.     },
  7.     onShow(){
  8.         this.setData({
  9.             autoFocus: true
  10.         });
  11.     },
  12.     bindButtonTap: function () {
  13.         this.setData({
  14.             focus: true
  15.         });
  16.     },
  17.     bindKeyInput: function (e) {
  18.         this.setData({
  19.             inputValue: e.detail.value
  20.         });
  21.     },
  22.     bindKeyfocus: function (e){
  23.         console.log(e.detail);
  24.     },
  25.     bindKeyblur: function (e){
  26.         swan.showToast({
  27.             title: '普通input失焦事件',
  28.             icon: 'none'
  29.         });
  30.     },
  31.     bindKeycomfirm: function (e){
  32.         swan.showToast({
  33.             title: '点击确定',
  34.             icon: 'none'
  35.         });
  36.     }
  37. });

代码示例3 - type 有效值 ：

在开发者工具中预览效果

  2. <view class="wrap">
  3.     <view class="card-area">
  4.         <view class="top-description border-bottom">自定义输入内容</view>
  5.         <view class="list-area border-bottom">
  6.             <view class="list-item-key-4">文本</view>
  7.             <view class="list-item-value">
  8.                 <input type="text" placeholder="type='text'" />
  9.             </view>
  10.         </view>
  12.         <view class="list-area border-bottom">
  13.             <view class="list-item-key-4">数字</view>
  14.             <view class="list-item-value">
  15.                 <input type="number" placeholder="type='number'" />
  16.             </view>
  17.         </view>
  19.         <view class="list-area border-bottom">
  20.             <view class="list-item-key-4">身份证</view>
  21.             <view class="list-item-value">
  22.                 <input type="idcard" adjust-position="{{true}}" placeholder="type='idcard'" />
  23.             </view>
  24.         </view>
  26.         <view class="list-area">
  27.             <view class="list-item-key-4">小数</view>
  28.             <view class="list-item-value">
  29.             <input type="digit" placeholder="type='digit'"/>
  30.             </view>
  31.         </view>
  32.     </view>
  34.     <view class="card-area">
  35.         <view class="top-description border-bottom">
  36.             <view>自定义占位符颜色</view>
  37.             <view>placeholder-style=color:"#3388FF"</view>
  38.         </view>
  39.         <input class="ipt" placeholder-class="placeholder" placeholder-style="color:#3388FF" placeholder="请在此输入" />
  40.     </view>
  41. </view>

代码示例4 - bindinput实时获取input输入值 ：

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <view class="card-area">
  3.         <view class="top-description">
  4.             <view>实时获取输入值</view>
  5.             <view>bindinput="bindKeyInput"</view>
  6.         </view>
  7.         <view class="textarea">{{inputValue}}</view>
  8.         <input class="ipt" bindinput="bindKeyInput" placeholder="请在此输入内容" />
  9.     </view>
  10. </view>
  1. Page({
  2.     bindKeyInput: function (e) {
  3.         this.setData({
  4.             inputValue: e.detail.value
  5.         });
  6.     }
  7. });

代码示例5 - input做业务搜索框 ：

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <!-- 搜索框 -->
  3.     <view class="search">
  4.         <view class="search-box">
  5.             <view class="search-icon"></view>
  6.             <input class="search-input"
  7.                 style="max-width:70%;"
  8.                 type="text"
  9.                 focus="{{focus}}"
  10.                 placeholder="搜索内容"
  11.                 value="{=value=}"
  12.                 placeholder-class="searchholder"
  13.                 bindfocus="searchFocus"
  14.                 bindinput="searchInput"
  15.                 bindconfirm="searchConfirm"
  16.                 confirm-type="search"
  17.                 bindblur="searchBlur"/>
  18.                 <block s-if="focus">
  19.                     <block s-if="value">
  20.                         <button class="search-input-clear" hover-class="search-clear-hover" bindtap="searchClear"></button>
  21.                     </block>
  22.                     <view class="{{value ? 'search-deep' : 'search-sear'}}" bindtap="searchConfirm">搜索</view>
  23.                 </block>
  24.         </view>
  25.     </view>
  27.     <!-- 输入框占位 -->
  28.     <view style="height:0.52rem;"></view>
  30.     <!-- 搜索结果 -->
  31.     <view s-if="hasResult" class="search-result">
  32.         <view>
  33.             <view class="empty-icon"></view>
  34.             <view class="empty-msg">搜索结果内容</view>
  35.         </view>
  36.     </view>
  38.     <!-- 搜索无结果 -->
  39.     <view s-if="!hasResult && showEmptyResult" class="empty-result">
  40.         <view>
  41.             <view class="empty-icon"></view>
  42.             <view class="empty-msg">暂无相关内容</view>
  43.         </view>
  44.     </view>
  45. </view>
Page({
    data: {
        value: '',
        focus: true,
        hasResult: false,
        showEmptyResult: false,
        blur: true
    },
    searchFocus(e) {
        this.setData({
            focus: true
        });
    },
    searchInput(e) {
        const value = e.detail.value;
        this.setData({
            value,
            hasResult: false,
            showEmptyResult: false
        });
        if (!value) {
            this.resetResult();
            return false;
        }

        if (value.length === 1 && /[a-zA-Z]/.test(value)) {
            this.resetResult();
            return false;
        }
    },
    searchConfirm(e) {
        const value = this.getData('value').replace(/\s/gi, '');
        if (value) {
            this.setData({
                showEmptyResult: true
            });
        }
    },
    searchBlur(e) {
        this.setData({
            focus: false
        });
    },
    searchClear() {
        this.setData({
            value: '',
            hasResult: false,
            showEmptyResult: false
        });
    }
});

Bug & Tip

  • Tip：confirm-type 的最终表现与手机输入法本身的实现有关，部分安卓系统输入法和第三方输入法可能不支持或不完全支持。
  • Tip：input 组件是一个原生组件，字体是系统字体，所以无法设置 font-family。
  • Tip：在 input 聚焦期间，避免使用 css 动画。
  • Bug：placeholder 的样式暂时只支持设置 font-size、font-weight、color 。
  • Bug：在 iOS 端键盘弹起时会出现组件 bindtap 不生效的问题（部分场景，如：IM 聊天场景中的固定在页面底部的文本框与发送按钮），建议先使用 bindtouchstart 代替 bindtap。
  • Tip：暂不支持 bindinput 处理函数直接 return 一个字符串。
  • Tip：v3.105.0 起 input 支持同层渲染，更多请参考原生组件input 输入框 - 图3。