微信小程序 input 组件的使用

微信小程序 input 组件的使用

<view class="section-1">

     <icon class="section-3" type="search" size="16"></icon>

     <input class="section-2" placeholder="请输入你想搜索的商品" />

</view>

<!--placeholder=""设置输入框内占位符的内容 icon标识符 type="search"显示类型为搜索图标 size="16" 设置图标大小为16px-->

<view class="section">

  <input placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}" />

  <view class="btn-area">

    <button bindtap="bindButtonTap">点击输入框获取焦点</button>

  </view>

</view>

<view class="section">

  <input maxlength="10" placeholder="最大输入长度10" />

</view>

<!--maxlength="10"设置输入框内最大输入长度-->

<view class="section">

  <view class="section__title">你输入的是：{{inputValue}}</view>

  <input bindinput="bindKeyInput" placeholder="输入同步到view中" />

</view>

<!--在输入框内输入内容显示到页面中-->

<view class="section">

  <input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />

</view>

<!--bindinput="bindReplaceInput"连续输入两个1会变成2-->

<view class="section">

  <input password type="number" />

</view>

<!--input password type="number" 设置输入框的内容为密码内容，键盘类型为纯数字键盘-->

<view class="section">

  <input password type="text" />

</view>

<!--input password type="text" 设置输入框内为密码显型类型 键盘类型为数字加字母-->

<view class="section">

  <input type="digit" placeholder="带小数点的数字键盘" />

</view>

<!--type="digit" 设置键盘样式为带小数点的数字键盘-->

<view class="section">

  <input type="idcard" placeholder="身份证输入键盘" />

</view>

<!--type="idcard"设置输入键盘改为身份证模式 -->

<view class="section">

  <input placeholder-style="color:red" placeholder="占位符字体是红色的" />

</view>

<!-- placeholder-style="color:red" 设置占位符内容的字体为红色（ps:也可以设置为其它颜色）—->