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

这篇具有很好参考价值的文章主要介绍了【小程序】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

微信小程序上下居中,0.【小程序】,前端,html

    <view class="boxNumber">

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

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

微信小程序上下居中,0.【小程序】,前端,html

文本框

微信小程序上下居中,0.【小程序】,前端,html

wxml文件

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

wxss代码文章来源地址https://www.toymoban.com/news/detail-608000.html

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

到了这里，关于【小程序】input输入框属性及上下左右居中的示例（图文+代码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！