百度智能小程序 输入框

2020-09-01 10:51 更新

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

说明 Web 态说明

text

文本输入键盘

-

number

数字输入键盘

-

idcard

身份证输入键盘

受设备系统或输入法限制,一些设备(如,带原生输入法的 iOS 设备)不支持

digit

带小数点的数字键盘

受设备系统或输入法限制,一些设备(如,带原生输入法的 iOS 设备)不支持

confirm-type 有效值

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

说明

send

键盘右下角按钮为 “发送”

search

键盘右下角按钮为 “搜索”

next

键盘右下角按钮为 “下一个”

go

键盘右下角按钮为 “前往”

done

键盘右下角按钮为 “完成”

示例 

在开发者工具中打开


代码示例 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>


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号