title: input 输入框 header: develop nav: component sidebar: formlist_input

webUrl: https://qft12m.smartapps.cn/component/input/input

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

属性说明

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

type 有效值

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

confirm-type 有效值

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

示例

在开发者工具中预览效果

扫码体验

webUrl: https://qft12m.smartapps.cn/component/input/input - 图1 请使用百度APP扫码

代码示例1 - 基础用法 ：

在开发者工具中预览效果

:::codeTab

  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 - 自定义输入控制 ：

在开发者工具中预览效果

:::codeTab

  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 有效值 ：

在开发者工具中预览效果

:::codeTab

  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输入值 ：

在开发者工具中预览效果

:::codeTab

  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做业务搜索框 ：

在开发者工具中预览效果

:::codeTab

  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>
  1. Page({
  2.     data: {
  3.         value: '',
  4.         focus: true,
  5.         hasResult: false,
  6.         showEmptyResult: false,
  7.         blur: true
  8.     },
  9.     searchFocus(e) {
  10.         this.setData({
  11.             focus: true
  12.         });
  13.     },
  14.     searchInput(e) {
  15.         const value = e.detail.value;
  16.         this.setData({
  17.             value,
  18.             hasResult: false,
  19.             showEmptyResult: false
  20.         });
  21.         if (!value) {
  22.             this.resetResult();
  23.             return false;
  24.         }
  26.         if (value.length === 1 && /[a-zA-Z]/.test(value)) {
  27.             this.resetResult();
  28.             return false;
  29.         }
  30.     },
  31.     searchConfirm(e) {
  32.         const value = this.getData('value').replace(/\s/gi, '');
  33.         if (value) {
  34.             this.setData({
  35.                 showEmptyResult: true
  36.             });
  37.         }
  38.     },
  39.     searchBlur(e) {
  40.         this.setData({
  41.             focus: false
  42.         });
  43.     },
  44.     searchClear() {
  45.         this.setData({
  46.             value: '',
  47.             hasResult: false,
  48.             showEmptyResult: false
  49.         });
  50.     }
  51. });

:::

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 支持同层渲染，更多请参考原生组件。