百度智能小程序 输入框

input 输入框

解释：输入框（v3.105.0 起支持同层渲染）。

属性说明

type 有效值

confirm-type 有效值

Web 态说明：Web 态下，受设备系统或输入法限制，confirm-type 值无法修改键盘右下角按钮文字。右下角按钮内容由设备系统或输入法决定。

示例 

在开发者工具中打开

代码示例 1： 基础用法

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

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

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定义输入控制</view>
        <view class="list-area border-bottom">
            <view class="list-item-key-4">自动聚焦</view>
            <view class="list-item-value">
                <input
                    placeholder='focus="true"'
                    selection-start="3"
                    selection-end="7"
                    focus="{{true}}"
                    confirm-hold="false"
                    confirm-type="send"
                    bindfocus="bindKeyfocus" />
            </view>
        </view>

        <view class="list-area border-bottom">
            <view class="list-item-key-4">控制长度</view>
            <view class="list-item-value">
                <input
                    cursor="100"
                    bindblur="bindKeyblur"
                    bindconfirm="bindKeyconfirm"
                    placeholder='maxlength="10"'
                    maxlength="10" />
            </view>
        </view>

        <view class="list-area border-bottom">
            <view class="list-item-key-4">禁用</view>
            <view class="list-item-value">
                <input disabled="true" placeholder='disabled="true"' />
            </view>
        </view>

        <view class="list-area">
            <view class="list-item-key-4">带有内容</view>
            <view class="list-item-value">
                <input value='value="{= value =}"' />
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        inputValue: '',
        autoFocus: true,
        value: '初始value值'
    },
    onShow(){
        this.setData({
            autoFocus: true
        });
    },
    bindButtonTap: function () {
        this.setData({
            focus: true
        });
    },
    bindKeyInput: function (e) {
        this.setData({
            inputValue: e.detail.value
        });
    },
    bindKeyfocus: function (e){
        console.log(e.detail);
    },
    bindKeyblur: function (e){
        swan.showToast({
            title: '普通input失焦事件',
            icon: 'none'
        });
    },
    bindKeycomfirm: function (e){
        swan.showToast({
            title: '点击确定',
            icon: 'none'
        });
    }
});

代码示例 3： 自定义输入内容

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定义输入内容</view>
        <view class="list-area border-bottom">
            <view class="list-item-key-4">文本</view>
            <view class="list-item-value">
                <input
                    type="text"
                    placeholder='type="text"'
                    bindinput="{{!isWeb ? '': 'keyBoardText'}}"
                    value="{= textValue =}" />
            </view>
        </view>

        <view class="list-area border-bottom">
            <view class="list-item-key-4">数字</view>
            <view class="list-item-value">
                <input type="number" placeholder='type="number"' bindinput="{{!isWeb ? '': 'keyBoardNumber'}}" value="{= numberValue =}" />
            </view>
        </view>

        <view class="list-area border-bottom">
            <view class="list-item-key-4">身份证</view>
            <view class="list-item-value">
                <input type="idcard" adjust-position="true" placeholder='type="idcard"' bindinput="{{!isWeb ? '': 'keyBoardCard'}}" value="{= cardValue =}" />
            </view>
        </view>

        <view class="list-area">
            <view class="list-item-key-4">小数</view>
            <view class="list-item-value">
            <input type="digit" placeholder='type="digit"' bindinput="{{!isWeb ? '': 'keyBoardDigit'}}" value="{= digitValue =}" />
            </view>
        </view>
    </view>
</view>

代码示例 4: 自定义占位符颜色

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">
            <view>自定义占位符颜色</view>
            <view>
                placeholder-style=
                color:"#3388FF"
            </view>
        </view>
        <input class="ipt" placeholder-class="placeholder" placeholder-style="color:#3388FF" placeholder="请在此输入" />
    </view>
</view>

代码示例 5: 实时获取输入值

<view class="wrap">
    <view class="card-area">
        <view class="top-description">
            <view>实时获取输入值</view>
            <view>bindinput="bindKeyInput"</view>
        </view>
        <view class="textarea">{{inputValue}}</view>
        <input class="ipt" bindinput="bindKeyInput" placeholder="请在此输入内容" />
    </view>
</view>