精华内容
下载资源
问答
  • 2020-03-27 19:12:12

    Demo:

     <view class="form-item">
          重量(kg)
          <input class="input" bindinput='bindinputWeight'
    更多相关内容
  • 微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • 微信小程序input标签自带type=digit属性,可以调起带有小数点的数字键盘,maxlength属性可以控制我们输入字符的个数,然后我们给input标签绑定bindinput方法。 <input type=digit bindinput=regInput maxlength=...
  • 主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,...
  • 微信小程序 input输入及动态设置按钮的实现 【需求】实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击;若有一个不满足,按钮置灰,不可点击;实现获取短信验证码,倒计时提示操作;对不满足...
  • 主要介绍了微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> ...
  • 主要介绍了微信小程序使用input组件实现密码框功能,涉及input组件布局设置相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
  • 微信小程序input标签详解

    千次阅读 2021-09-06 13:19:05
    微信项目开发中,input标签用的地方很多,包括用户信息的录入,用户的查询操作等等,那input标签怎么能够快速的上手,熟练的使用呢?希望这篇文章可以帮助到你。 一、input框常用事件 1.input框获取焦点事件...

            在微信项目开发中,input标签用的地方很多,包括用户信息的录入,用户的查询操作等等,那input标签怎么能够快速的上手,熟练的使用呢?希望这篇文章可以帮助到你。


    一、input框常用事件

            1.input框获取焦点事件(bindfocus)

                    常用在用户获取到焦点时,获取input框中的数据,进行存取或判定。

    <input type="text" bindfocus="_bindfocus"/>    //获得焦点事件
    
    
    _bindfocus(e){
        console.log(e.detail.value);  //可以通过e.detail.value获取到输入框的值
      }

            2.input框失去焦点事件(bindblur)

                    常用来对用户输入的值进行保存,是否输入完整的判断,或者配合正则表达式,对用户输入的值进行判定。

    <input type="text" bindblur="_bindblur"/>    //失去焦点事件
    
    _bindblur(e){
        console.log(e.detail.value);    //获取input输入框的值
      }

            3.input框输入事件(bindinput)

                    每次输入值都会触发,实时获取输入值,可以进行数值的判断,例如:用户验证码输入为4位数字时,注册按钮可以点击,其他状态下不可点击。

            

    <input type="text" bindinput="_bindinput"/>    //input框输入事件
    
    
     _bindinput(e){
        console.log(e.detail.value);    //实时获取用户输入值
      }

            4.input框回车事件(bindconfirm)

                    用户用户查询操作,输入完以后点击回车,获取用户输入值,进行查询,返回对应信息。

    <input type="text" bindconfirm="_bindconfirm"/>    //input框回车事件
    
     _bindconfirm(e){
        console.log(e.detail.value);    //获取input输入框的值
      }

    二、input框常用属性

    placeholder    //输入为空时默认显示值
    disabled    //是否禁用
    maxlength    //最大输入长度
    

    展开全文
  • 微信小程序input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,...
  • 本文实例讲述了微信小程序实现提交input信息到后台的方法。分享给大家供大家参考,具体如下: wxml文件: <!-- 用户名事件绑定 --> 您的姓名 <input type=text placeholder='\u8bf7\u8f93\u5165\u60a8\u...
  • 查看微信官方文档 input的type属性 需要digit才可以使用带小数点的键盘

     

    查看微信官方文档 input的type属性 需要digit才可以使用带小数点的键盘

     

    展开全文
  • 微信小程序文本输入<input/> 详解

    千次阅读 2021-12-11 23:15:41
    微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。

    在微信小程序开发中,input 用来实现文本输入,如输入用户名密码等等

    1 基本使用

    <input class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
    

    基本效果就是显示了一个文本输入框。

    • placeholder 输入框为空时的占位符
    • auto-focus 自动聚集,拉起键盘,需要注意的是一个页面中只能有一个 input 标签 或者 textarea 来设置这个属性

    在这里插入图片描述

    2 获取输入框中的内容

    bindinput 属性用来绑定键盘输入时的事件监听,也就是可以实时获取输入中的内容 。

    当然 在你的处理函数中可以直接 return 一个结果来替换输入框中的内容。

      <input bindinput="userNameInputAction"  class="input" name="userName" placeholder="请输入用户名" auto-focus="true" />
    

    对应的 js

      /**
       * 输入框实时回调
       * @param {*} options 
       */
      userNameInputAction: function (options) {
        //获取输入框输入的内容
        let value = options.detail.value;
        console.log("输入框输入的内容是 " + value)
      },
    

    效果
    在这里插入图片描述

    3 输入框焦点监听

    应用场景还是比较多的,比如输入结束时 去校验个数据什么的

    • bindfocus
    • bindblur 输入框焦点移出
    • bindconfirm 点击键盘的回车键或者是完成按钮时回调的事件
      <input bindfocus="userNameFocusAction" bindblur="userNameBlurAction" bindconfirm="userNameConfirm" placeholder="请输入用户名" />
    

    对应的 js

      userNameFocusAction: function (options) {
        //输入框焦点获取
        let value = options.detail.value;
        console.log("输入框焦点获取 " + value)
      },
    
      userNameBlurAction: function (options) {
        //输入框焦点移出
        let value = options.detail.value;
        console.log("输入框焦点移出 " + value)
      },
      
      userNameConfirm: function (options) {
        //点击了键盘上的完成按钮
        let value = options.detail.value;
        console.log("点击了键盘上的完成按钮 " + value)
      },
    

    效果图
    在这里插入图片描述

    4 常用输入限制

    • disabled 默认为false 不禁用输入框,为true时是不可输入的
    <input disabled="{{isInput}}" placeholder="请输入用户名" />
    
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        isInput:true
      },
    
    })
    

    在这里插入图片描述

    • password 默认为 false ,为true时,输入的内容为密码类型
    <input  password="true" placeholder="请输入用户名" />
    

    在这里插入图片描述

    • value 输入框初始内容

    5 type 文本框输入内容格式

    在HTML中,input组件中的type属性可以接收哪些值,有button、text、radio、checkbox、hidden、image、reset、submit等。而在微信小程序中,type属性只有text、number、idcard、digit、time和date。

    • type 输入框可输入的数据 类型
    text文本
    number数字 纯数字键盘模式输入 无小数点
    idcard数字 数字键盘(无小数点、有个 X 键)
    digit数字 带小数点的数字键盘模式输入

    完毕

    展开全文
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 微信小程序中是不能修改input样式的 甚至修改大小也不能,那么怎么做一个自定义样式的input呢 说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap...
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 问题:微信小程序input获取焦点时内容飞到上面了,input用view标签包裹,未使用定位 解决:最外层标签使用scroll-view包裹,当input获取到焦点时,scroll-view的属性scroll-y设置为false,当input失去焦点时,...
  • 微信小程序input层级穿透解决

    千次阅读 2021-10-09 09:40:38
    微信小程序里面,由于input是原生组件,所以会存在层级穿透的问题,view标签无法覆盖在上面,点击的时候,下面的input组件会被聚焦,下面记录一下解决方法 解决方法 1.使用cover-view代替view(不太推荐) 该方法...
  • 微信小程序input遮盖问题 在开发微信小程序时遇到这样一个问题,input有图中这么宽,但内容却只能输入80% 解决 终于找到了,用来是flex问题,所以大家对input垂直居中的时候,不要用flex,用line-height行高设置 ...
  • 在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡。 如图: (此图片来源于网络,如有侵权,请联系删除!...微信小程序开发文档api: https://developers.weixin.qq.com/minipr
  • textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: 写个评论" bindinput="listenerinput"></autoheight_textarea>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,214
精华内容 12,885
关键字:

微信小程序input类型

微信小程序 订阅