b-input · bilibili小程序

输入框。该组件是原生组件，使用时请注意相关限制。

属性	类型	默认值	说明
value	string		输入框的初始内容
type	string	"text"	input 的类型
password	boolean	false	是否是密码类型
placeholder	string		输入框为空时占位符
placeholder-style	string		指定 placeholder 的样式
placeholder-class	string		指定 placeholder 的样式类
disabled	boolean	false	是否禁用
maxlength	number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus	boolean	false	获取焦点
confirm-type	string	"done"	设置键盘右下角按钮的文字，仅在type='text'时生效
confirm-hold	boolean	false	点击键盘右下角按钮时是否保持键盘不收起
cursor	number		指定focus时的光标位置
selection-start	number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用
adjust-position	boolean	true	键盘弹起时，是否自动上推页面
input	eventhandle		键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值
focus	eventhandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
blur	eventhandle		输入框失去焦点时触发，event.detail = {value: value}
confirm	eventhandle		点击完成按钮时触发，event.detail = {value: value}

type 有效值：

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

confirm-type 有效值：

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

注：confirm-type 的最终表现与手机输入法本身的实现有关，部分Android系统输入法和第三方输入法可能不支持或不完全支持。

示例代码

<template>
    <div>
        <p class="desc">可以自动聚焦的input</p>
        <b-input class="b-input" :focus="focus" placeholder="将会自动获取焦点"></b-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            focus: true
        };
    },
    methods: {}
};
</script>

<style scoped>
.b-input {
    width: 100%;
    height: 28px;
    border: 1px solid red;
}
</style>

Bug & Tip

请注意原生组件说明。
input 组件聚焦时是一个原生组件，字体是系统字体。非聚焦时是h5控件，若使用了系统不存在的字体，聚焦后字可能会有较大的变化。
在 input 聚焦期间，避免使用 css 动画。