【小程序】input输入框属性及上下左右居中的示例（图文+代码）

属性	功能	示例
placeholder	输入框空时，提示文字	placeholder=“请输入用户名”
placeholder-style	输入框，提示文字的样式	placeholder-style= "color:rgb(170,170,170); margin-left: 20px;"
placeholder-class	placeholder 的样式类	用class样式修改
cursor-spacing	指定的光标与弹出键盘的距离	cursor-spacing="50"
type	text：文本输入 idcard：身份证输入键盘 digit：带小数点的数字键盘 nickname：昵称输入键盘
password	密码格式
disabled	只读，禁用输入	disabled="false"
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	maxlength=“-1”
focus	获得焦点	focus="true"
在view中的垂直居中	display: flex;align-items: center;
在view中的左右水平居中	display: flex;justify-content: center;

官方文档：

input | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/input.html

二、实例1

    <view class="boxNumber">

        <view>￥</view>
        <view>
            <input type="digit" placeholder="请输入金额" placeholder-class="boxNumberInput" adjust-position="true">
            </input>
        </view>
    </view>

二、实例2，文本框和文本框组合

 文本框

wxml文件

<view class="text">
    <input type="text" required="required" placeholder="请输入手机号" placeholder-style="color:rgb(170,170,170);">
    </input>
</view>

 wxss代码

    .text {
        height: 60px;
        width:94%;
        margin: 0 auto;
        display: flex;
        text-align: center;
        justify-content: center;
        /* background-color:red; */
        margin-bottom: 10px;
    }