微信小程序day03_04之form组件之input文本框

古城微笑少年丶 2022-02-28 06:04 486阅读 0赞

### 文章目录 ###

*   *   *  一. input
         *  二.代码示例

### 一. input ###

输入框。该组件是原生组件，使用时请注意相关限制。  
官方文档如下  
[https://developers.weixin.qq.com/miniprogram/dev/component/input.html][https_developers.weixin.qq.com_miniprogram_dev_component_input.html]  
如下为部分的属性  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

### 二.代码示例 ###

wxml中的代码如下

<view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    
    
    <input value="学习小程序实战" cursor-spacing="0" bindinput="inputEvent" bindfocus="focusEvent" bindblur="blurEvent" bindconfirm="confirmEvent"></input>
    
    <input value='number' type='number'></input>
    <input value='idcard' type='idcard'></input>
    <input value='digit' type='digit'></input>
    
    密码框 <input password="true" value='digit' ></input>
    用户名框 <input placeholder="请输入用户名"></input>
    confirm-type <input confirm-type="search" placeholder="请输入用户名"></input>
    
    
    用户名框66 <input selection-start="1" selection-end="3" value='sdfsdffdfs' placeholder-class='placeholder' cursor="3" focus="true" adjust-position="true">666</input>
    
    
    用户名框 <input placeholder="请输入用户名" maxlength="3" placeholder-class='placeholder' ></input>
    
    
    
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>
    <view>23432</view>

js中的代码如下, 主要演示了input框的一些事件,和bindinput中, return 一个字符串，将替换输入框的内容。

// pages/input/input.js
    Page({ 
     inputEvent: function(){ 
        console.log("input");
        return "666666";
     },
     focusEvent: function(){ 
       console.log("focusEvent");
     },
     blurEvent: function(){ 
       console.log("blurEvent");
     },
     confirmEvent: function(){ 
       console.log("confirmEvent");
     }
    })

显示效果如下图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
控制台打印如下:  
![20190325195624249.png][]

[https_developers.weixin.qq.com_miniprogram_dev_component_input.html]: https://developers.weixin.qq.com/miniprogram/dev/component/input.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220228/1c695cd11fc144d1b50c46e7fde8f2d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220228/078c9e40a6a5499caa40154e376a0fda.png
[20190325195624249.png]: /images/20220228/bfc15b0b064f46ec88776fc61c762038.png