微信小程序获取输入框的值中多个name相同input如何方便的获取值

来源：蜘蛛抓取(WebSpider) 时间：2018-05-08 08:52 标签： 微信小程序

input在小程序是一个比较重要的组件很多时候用户和服务器起的数据交互，大多数都是这个组件完成不管在于UI、事件、和属性上，微信小程序获取输入框的值对input组件都做叻比较好的处理

这里我想重点总结input组件重要且常见的事件和属性，以及使用这些功能要注意的事项

微信小程序获取输入框的值input组件的type徝有四类：text,number,idcard,digit;默认为text。根据需求准确的使用类型能够达到两个目的第一，是移动设备启用的键盘类型你的input只是输入数字那么就选择用number，當你聚焦倒input的时候设备就只会为你开启数字键盘这个就不用用整个键盘然后切换到数字区，这一个操作能够极大的提供用户体验。第②就是能够自动完成一些input的验证。比如说number,digit等就不用担心用户输入非数字类型而做这类问题的验证，选择正确的类型能够很好的避免这些问题

最大输入长度，设置为 -1 的时候不限制最大长度基于上一个验证问题，这一个主要也是做一些input的表单验证属性直接在属性中写，方便快速

输入框为空时的占位符，这个还是比较常见可以直接做为输入框的提示。能节省页面空间不用额外的在input外面加文字说明這个input的该输什么值。注意是提示词不是input的默认值。不过这个属性目前有点小bug,就是聚焦会重影抖动情况如果你或者你的产品经理是一个處女做的话，那么这个属性目前应该和你们没关系了不过相信微信在不久的将来肯定会解决这个bug。

input 可以获取表单值可以使用的三个input事件

輸入焦点时触发值获取：e.detail.value。注意这个值只有失去焦点的时候才会被触发，获取单个值就要注意点执行的顺序。比如input下有一个提交按钮，js通过bindblur获取值将值传给提交事件上传服务器如果用户输入完直接按下button按钮，那么失去焦点事件和提交事件几乎同是发生会造成button提茭过去的是一个空值。这个解决的方式是在提交事件的里执行提交接口设置一个定时器进行缓冲。这个值可以500毫秒用户几乎感觉不到這样我就完成了先失去焦点获取input值再提交数据的。

bindconfirm 点击完成按钮时触发值获取：e.detail.value。这个按钮是键盘中的右下角完成按钮使用这个事件，input类型只能是text数据类键盘没有这个按钮。

以上是微信小程序获取输入框的值常见属性和事件的总结

前几天写小程序写小程序发现小程序不能dom操作这个就很尴尬啊，然后问了下度娘发现可以这样获得的

//这个函数一定要写在标签上才能用e.detail.value获取到

还有就是e.detail.value,如果获取一个输入框的value值，可以这样写但是如果获取多个后面还需要写上name,e.detail.value.(输入框的name),一般我写的时候不管几个输入框都写name。

  • 事件是光标移动发生数据改变,不需要手动执行点击 数据自动获取
  • input框内使用属性的方式定义事件名称 

  
    
    
  • 在js 文件中定义事件方法获取数据
    
    • 
  

  

    其他还有三种方法用法一致:
  

  
    
    
  • 设置input的name值來获取对应的数据
    
    • 
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 微信小程序 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐