百度智能小程序 輸入框

input 輸入框

解釋?zhuān)狠斎肟颍╲3.105.0 起支持同層渲染）。

屬性說(shuō)明

type 有效值

confirm-type 有效值

Web 態(tài)說(shuō)明：Web 態(tài)下，受設(shè)備系統(tǒng)或輸入法限制，confirm-type 值無(wú)法修改鍵盤(pán)右下角按鈕文字。右下角按鈕內(nèi)容由設(shè)備系統(tǒng)或輸入法決定。

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1： 基礎(chǔ)用法

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">基礎(chǔ)用法</view>
        <input class="ipt" placeholder="請(qǐng)?jiān)诖溯斎霕?biāo)題" />
    </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">自動(dòng)聚焦</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">控制長(zhǎng)度</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">帶有內(nèi)容</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: '點(diǎn)擊確定',
            icon: 'none'
        });
    }
});

代碼示例 3： 自定義輸入內(nèi)容

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定義輸入內(nèi)容</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">數(shù)字</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">小數(shù)</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="請(qǐng)?jiān)诖溯斎? />
    </view>
</view>

代碼示例 5: 實(shí)時(shí)獲取輸入值

<view class="wrap">
    <view class="card-area">
        <view class="top-description">
            <view>實(shí)時(shí)獲取輸入值</view>
            <view>bindinput="bindKeyInput"</view>
        </view>
        <view class="textarea">{{inputValue}}</view>
        <input class="ipt" bindinput="bindKeyInput" placeholder="請(qǐng)?jiān)诖溯斎雰?nèi)容" />
    </view>
</view>