属性 | 功能 | 示例 |
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文件文章来源:https://www.toymoban.com/news/detail-608000.html
<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模板网!