input 输入框

    confirm-type 有效值

    代码示例1 - 基础用法 ：

    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.             </view>
    23.         </view>
    25.         <view class="list-area">
    27.             <view class="list-item-value">
    28.                 <input value="value='{= value =}'"/>
    29.             </view>
    30.         </view>
    31.     </view>
    32. </view>

    代码示例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>
    22.             </view>
    23.         </view>
    25.         <view class="list-area">
    26.             <view class="list-item-key-4">小数</view>
    27.             <view class="list-item-value">
    28.             <input type="digit" placeholder="type='digit'"/>
    29.             </view>
    30.         </view>
    31.     </view>
    33.     <view class="card-area">
    34.         <view class="top-description border-bottom">
    35.             <view>自定义占位符颜色</view>
    36.             <view>placeholder-style=color:"#3388FF"</view>
    37.         </view>
    38.         <input class="ipt" placeholder-class="placeholder" placeholder-style="color:#3388FF" placeholder="请在此输入" />
    39.     </view>
    40. </view>
    1. Page({
    2.     bindKeyInput: function (e) {
    3.         this.setData({
    4.             inputValue: e.detail.value
    5.         });
    6.     }

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

    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
        });
    }
});
    • 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 一个字符串。