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

输入框。

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
指定光标与键盘的距离

扫描二维码关注公众号，回复： 15168190 查看本文章

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