首页 > 编程知识 正文

微信小程序开发初学输入框 input

时间:2023-05-04 21:30:39 阅读:259716 作者:632

输入框。

input具有的属性

value
类型:String
默认值:无
输入框内的初始内容

type
类型:String
默认值:text
输入内容的类型

type属性的合法值
(1)text:输入文本
(2)number:输入数字(弹出数字键盘)
(3)idcard:输入身份证(弹出身份证输入键盘)

password
类型:boolean
默认值:false
是否为密码类型(输入内容显示为圆点)

placeholder
类型:String
默认值:无
提示词

placeholder-class
类型:String
默认值:input-placeholder
placeholder的 样式类

disabled
类型:boolean
默认值:false
input禁用

maxlength
类型:number
默认值:-1
最大输入长度,设置为 -1 的时候不限制最大长度

foucs
类型:boolean
默认值:false
自动聚焦,拉起键盘

cursor-spacing
类型:number
默认值:0
指定光标与键盘的距离

confirm-type
类型:String
默认值:done
设置键盘右下角按钮的文字,仅在 type=“text” 时生效

confirm-type属性的合法值
(1)done:文字为“完成”
(2)search:文字为“搜索”
(3)send:文字为“发送”
(4)next:文字为“下一个”
(5)go:文字为“前往”

示例:

<!--pages/input/input.wxml--><view class="input-view"> <form bindsubmit="onSubmit"> <input class="input1" type="text" ></input> <input class="input1" type="number"></input><!--数字输入--> <input class="input1" type="idcard"></input><!--身份证输入--> <input class="input1" type="text" password></input> <!--密码类型,输入隐藏--> <input class="input1" type="text" value="设置了初始值value"></input> <input class="input1" placeholder="请输入用户名" placeholder-class="input1-place"> </input> <!--placeholder 提示词内容 placeholder-class 提示词样式类--> <input class="input1" disabled></input> <!--disabled 设置是否禁用--> <input class="input1" type="idcard" maxlength="18"></input> <!--maxlength设置最大输入长度,如输入身份证号最多18位--> <input class="input1" foucs></input> <input class="input1" foucs cursor-spacing="10px"></input> <!--foucs 设置键盘聚焦 cursor-spacing设置输入框与键盘距离--> <input class="input1" focus confirm-type="search"></input> <!--confirm-type设置键盘右下角按钮内容(需要type="text"才有效)--> <button class="btn1" type="primary" form-type="submit">提交</button> <!--form表单组件 ,与form-type属性配套使用--> </form></view> /* pages/input/input.wxss */.input1{ height: 35px; border: 1px solid black; border-radius: 5px; /*设置边框及圆角*/ margin-top: 10px;}.input1-place{ /*placeholder样式类*/ color: palevioletred; font-style: italic;}.btn1{ margin-top: 20px;}


内容参考自小程序API:
https://developers.weixin.qq.com/miniprogram/dev/component/input.html

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。