精华内容
下载资源
问答
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 完整微信小程序(Java后端) 技术贴目录清单页面(必看) 输入框。该组件是原生组件,使用时请注意相关限制 属性 类型 默认值 必填 说明 最低版本 value string 是 输入框的初始内容 1.0.0 type string ...

    完整微信小程序(Java后端) 技术贴目录清单页面(必看)

    输入框。该组件是原生组件,使用时请注意相关限制

    属性类型默认值必填说明最低版本
    valuestring输入框的初始内容1.0.0
    typestringtextinput 的类型1.0.0
    passwordbooleanfalse是否是密码类型1.0.0
    placeholderstring输入框为空时占位符1.0.0
    placeholder-stylestring指定 placeholder 的样式1.0.0
    placeholder-classstringinput-placeholder指定 placeholder 的样式类1.0.0
    disabledbooleanfalse是否禁用1.0.0
    maxlengthnumber140最大输入长度,设置为 -1 的时候不限制最大长度1.0.0
    cursor-spacingnumber0指定光标与键盘的距离,取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离1.0.0
    auto-focusbooleanfalse(即将废弃,请直接使用 focus )自动聚焦,拉起键盘1.0.0
    focusbooleanfalse获取焦点1.0.0
    confirm-typestringdone设置键盘右下角按钮的文字,仅在type='text’时生效1.1.0
    always-embedbooleanfalse强制 input 处于同层状态,默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)2.10.4
    confirm-holdbooleanfalse点击键盘右下角按钮时是否保持键盘不收起1.1.0
    cursornumber指定focus时的光标位置1.5.0
    selection-startnumber-1光标起始位置,自动聚集时有效,需与selection-end搭配使用1.9.0
    selection-endnumber-1光标结束位置,自动聚集时有效,需与selection-start搭配使用1.9.0
    adjust-positionbooleantrue键盘弹起时,是否自动上推页面1.9.90
    hold-keyboardbooleanfalsefocus时,点击页面的时候不收起键盘2.8.2
    bindinputeventhandle键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。1.0.0
    bindfocuseventhandle输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持1.0.0
    bindblureventhandle输入框失去焦点时触发,event.detail = {value: value}1.0.0
    bindconfirmeventhandle点击完成按钮时触发,event.detail = {value: value}1.0.0
    bindkeyboardheightchangeeventhandle键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration}2.7.0

    type 的合法值

    说明最低版本
    text文本输入键盘
    number数字输入键盘
    idcard身份证输入键盘
    digit带小数点的数字键盘

    confirm-type 的合法值

    说明最低版本
    send右下角按钮为“发送”
    search右下角按钮为“搜索”
    next右下角按钮为“下一个”
    go右下角按钮为“前往”
    done右下角按钮为“完成”

    Bug & Tip

    1. tip: confirm-type的最终表现与手机输入法本身的实现有关,部分安卓系统输入法和第三方输入法可能不支持或不完全支持
    2. tip : input 组件是一个原生组件,字体是系统字体,所以无法设置 font-family
    3. tip : 在 input 聚焦期间,避免使用 css 动画
    4. tip : 对于将 input 封装在自定义组件中、而 form 在自定义组件外的情况, form 将不能获得这个自定义组件中 input 的值。此时需要使用自定义组件的 内置 behaviors wx://form-field
    5. tip : 键盘高度发生变化,keyboardheightchange事件可能会多次触发,开发者对于相同的height值应该忽略掉
    6. bug : 微信版本 6.3.30, focus 属性设置无效
    7. bug : 微信版本 6.3.30, placeholder 在聚焦时出现重影问题

    示例代码

    在开发者工具中预览效果

    index.wxml

    <view class="page-body">
      <view class="page-section">
        <view class="weui-cells__title">可以自动聚焦的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" auto-focus placeholder="将会获取焦点"/>
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">控制最大输入长度的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" maxlength="10" placeholder="最大输入长度为10" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">实时获取输入值:{{inputValue}}</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input"  maxlength="10" bindinput="bindKeyInput" placeholder="输入同步到view中"/>
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">控制输入的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input"  bindinput="bindReplaceInput" placeholder="连续的两个1会变成2" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">控制键盘的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input"  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">数字输入的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" type="number" placeholder="这是一个数字输入框" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">密码输入的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" password type="text" placeholder="这是一个密码输入框" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">带小数点的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" type="digit" placeholder="带小数点的数字键盘"/>
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">身份证输入的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" type="idcard" placeholder="身份证输入键盘" />
          </view>
        </view>
      </view>
      <view class="page-section">
        <view class="weui-cells__title">控制占位符颜色的input</view>
        <view class="weui-cells weui-cells_after-title">
          <view class="weui-cell weui-cell_input">
            <input class="weui-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
          </view>
        </view>
      </view>
    </view>
    

    index.js

    Page({
      data: {
        focus: false,
        inputValue: ''
      },
      bindKeyInput: function (e) {
        this.setData({
          inputValue: e.detail.value
        })
      },
      bindReplaceInput: function (e) {
        var value = e.detail.value
        var pos = e.detail.cursor
        var left
        if (pos !== -1) {
          // 光标在中间
          left = e.detail.value.slice(0, pos)
          // 计算光标的位置
          pos = left.replace(/11/g, '2').length
        }
    
        // 直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置
        return {
          value: value.replace(/11/g, '2'),
          cursor: pos
        }
    
        // 或者直接返回字符串,光标在最后边
        // return value.replace(/11/g,'2'),
      },
      bindHideKeyboard: function (e) {
        if (e.detail.value === '123') {
          // 收起键盘
          wx.hideKeyboard()
        }
      }
    })
    
    

    运行效果:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHI6BhQI-1622384290616)(image-20210529104322224.png)]

    微信搜一搜【java1234】关注这个放荡不羁的程序员,关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

    展开全文
  • 微信小程序输入框大全

    千次阅读 2017-01-20 20:02:35
    结构部分  ... 使得输入框获取焦点      你输入的是:{{inputValue}}            

    结构部分 

    <!--page/component/component-pages/input/input.wxml-->

    <!--input.wxml-->

    <view class="section">

      <input placeholder="这是一个可以自动聚焦的input" auto-focus/>

    </view>

    <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>

    <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>

    <view class="section">

      <input  bindinput="bindHideKeyboard" placeholder="输入123自动收起键盘" />

    </view>

    <view class="section">

      <input password type="number" />

    </view>

    <view class="section">

      <input password type="text" />

    </view>

    <view class="section">

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

    </view>

    <view class="section">

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

    </view>

    <view class="section">

      <input placeholder-style="color:green" placeholder="设置placeholder 的颜色" />

    </view>


    js部分

    // page/component/component-pages/input/input.js

    Page({

      data: {

        focus: false,

        inputValue: ''

      },

      bindButtonTap: function() {

        this.setData({

          focus: true

        })

      },

      bindKeyInput: function(e) {

        this.setData({

          inputValue: e.detail.value

        })

      },

      bindReplaceInput: function(e) {

        var value = e.detail.value

        var pos = e.detail.cursor

        if(pos != -1){

          // 光标在中间

          var left = e.detail.value.slice(0,pos)

          // 计算光标的位置

          pos = left.replace(/11/g,'2').length

        }


        // 直接返回对象,可以对输入进行过滤处理,同时可以控制光标的位置

        return {

          value: value.replace(/11/g,'2'),

          cursor: pos

        }


        // 或者直接返回字符串,光标在最后边

        // return value.replace(/11/g,'2'),

      },

      bindHideKeyboard: function(e) {

        if (e.detail.value === "123") {

          //收起键盘

          wx.hideKeyboard()

        }

      }

    })

    展开全文
  • 微信小程序输入框的一些问题

    万次阅读 2018-05-10 11:28:42
    1.微信小程序处理软键盘弹出布局上移遮住输入框的解决方法    相信很多人在开发微信小程序时都遇到这个问题,当你在小程序上预览时,底部的input在聚焦时弹出的软键盘会把input框遮住一小部分,不管是inpu还是...

    1.微信小程序处理软键盘弹出布局上移遮住输入框的解决方法

     

     相信很多人在开发微信小程序时都遇到这个问题,当你在小程序上预览时,底部的input在聚焦时弹出的软键盘会把input框遮住一小部分,不管是inpu还是textarea  给他们设置cursor-spacing属性就可以解决这个问题 了。

      

    以input作为例子


    <input placeholder='请输入初试专业课成绩' cursor-spacing='20'></input>

     

     

    2.input框在手机上显示出现跳动问题

     

    一般情况下input都是包裹在view标签里如果你想要输入框有边框可以给view设置在view上,小程序上的input有默认高度,当你给input设置高度时在手机上显示会有出现文字跳动一下再居中,后来在测试的时候我发现给input设置margin-top微调时还是会有抖动。(还是会有抖动);

    解决方案:(还未验证,从别处搬过来的)

    input组件有个默认的宽高,在使用flex布局的时候,发现会影响到页面的布局,input有个样式min-height:1.4rem,将样式min-height改一下。

     

    展开全文
  • 使用 palaceholder-class属性 在wxss中修改其格式的样式 wxml: <input class="input" type="text" bindinput='getInputValue' name="find" placeholder="输入查询内容" placeholder-class="bgc" form-type=...

    使用 palaceholder-class属性 在wxss中修改其格式的样式
    wxml:

       <input class="input" type="text" bindinput='getInputValue'  name="find" placeholder="输入查询内容" placeholder-class="bgc" form-type="submit"/> 
    

    wxss:

    .bgc
    {
      color:gray;
    }
    

    修改后效果:
    在这里插入图片描述
    如果需要设定输入后字体则直接用input的class然后在wxss中设定即可

    展开全文
  • 主要为大家详细介绍了微信小程序实现MUI数字输入框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序输入框会字体显示不全或者换行 问题描述 有的时候不同的设备上会出现微信小程序输入框表现不一致,比如:换行,字体显示不全 解决方案 用开发者工具调试发现,input,textarea 有默认的 weight ...
  • 相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改,该方法仅适用于微信小程序。 一、我们要给placeholder定义一个...
  • 主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • 在input组件上绑定data-model=xxx bindinput=inputWatch,监听输入框输入: <input placeholder=请输入6~12位密码 name=password value={{password}} data-model=password bindinput=inputWacth type=password ...
  • 微信小程序中 textarea 组件的层级过高如何解决 前言:这篇文章对谁有用 微信小程序开发者 前言:本文有什么用? 提供解决问题的思路,供你参考 (因为时间关系,我没法把代码整理的好好的然后贴出来让你复制黏贴...
  • 微信小程序开发初学:输入框 - input

    千次阅读 2021-01-27 11:40:30
    输入框。 input具有的属性 value 类型:String 默认值:无 输入框内的初始内容 type 类型:String 默认值:text 输入内容的类型 type属性的合法值 (1)text:输入文本 (2)number:输入数字(弹出数字键盘) (3)...
  • //placeholder-style 占位符样式 //auto-focus //maxlength //bindinput 监听事件 //password 密码输入 //type : number 数字输入框 digit 带小数点的数字键盘 idcard 身份证输入键盘 <view class="section">...
  • 微信小程序创建输入框

    千次阅读 2018-06-28 17:45:20
    一、相关知识: 创建输入框主要用到input组件...输入框形式主要有输入框型、下划线型     二、实现 -----------------------------------------输入框型: wxml文件: ...
  • input输入框这一模块使用position:fixed固定在页面底部,通过adjust-position的值来控制键盘弹起时是否自动上推页面,通过bindfocus来获取键盘高度,使input输入框聚焦时跟随键盘上移而不被遮挡,输入框失去焦点时...
  • 微信小程序 - 自定义组件 预览 用微信web开发者工具打开src目录(请注意,是src目录,不是整个项目) 使用 组件的wxml结构请看src/components/下的组件 样式文件可直接引用src/components/wux.wxss Components ...
  • 微信小程序——input 搜索框样式

    千次阅读 2020-08-26 21:31:46
    .wxml文件 .wxss文件 .search-input { position: relative; width: 686rpx; margin: 0 32rpx; height: 68rpx; -webkit-overflow-scrolling: touch... } //自定义样式 .search-placeholder { font-size: 28rpx; } 效果:
  • 微信小程序中,要为用户提供安全密码,用于后续的操作。UI设计稿类似微信的安全密码设置,需要两次输入,验证密码一致。之前刚入坑的时候,就收藏了一些小程序相关的好案例,没有前人铺路,也不会有今天的这篇文章。...
  • 微信小程序——好看的文字加输入框(文本框)

    千次阅读 多人点赞 2021-03-02 16:02:03
    效果图: wxml代码: <view class="view-contain-ti"> <text class="text-ti">账号</text> <input class="input1"></input> </view>... border: 3rpx soli
  • 微信小程序6位验证码输入框、隐藏光标、letter-spacing失效 有需求要做6位验证码框如下图: 开始分别用6个输入框做这个6个数字,发现在手机上有延时不快速,而且删除部分数字会出问题。 之后想到一个办法: 用...
  • 最近在开发小程序的时候,在一个固定于页面中间的滚动容器内放了一个表单,在安卓端测试功能完好,在IOS端有一个bug。当输入框在输入后没有点击其他位置使输入框失焦的话,如果滚动窗口内部的字体也会跟着滚动下面使...
  • 微信小程序】自定义弹窗文本输入框效果图&完整代码 效果图 在输入框中进行内容的输入 点击确认后在姓名一栏进行更新修改 点击返回后姓名一栏不做任何修改 在这个的基础上你可以自定义任何弹窗 wxml <...
  • 微信小程序:验证码/密码输入框

    千次阅读 2020-11-03 15:11:03
    产品需求,进入直播会议前校验需不要需要输入密码,输入密码样式仿造微信支付样式,如下是效果图 一、效果图如下: 二、代码部分: wxml: <view class='content'> <!-- 输入框(表格) --> <view...
  • 微信小程序输入框input属性名 类型 默认值 说明value String 输入框的内容type String text input的类型,有效值:text,number,idcard,digit,time,datepassword Boolean false 是否是密码类型placeholder String ...
  • 这里有一个坑的地方,就是’btnactive’明明在wxss 写了样式却没。 嗯,我是这样处理的 直接点解获取里面类 .enroll-upbtnactive{ background: #0F4E4B; border-radius: 4px; width: 80%; font-size: ...
  • 1、微信小程序Number()和parseInt() 2、colorui的var组件 3、wx.setStorageSync保存至本地缓存 二、关键源码 <view class="action"> <button class="cu-btn bg-blue shadow" bindtap="numSteps" style=...
  • 欢迎点击「算法与编程之美」↑关注我们!本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章。问题描述如何更改小程序页面中的文本框颜色和边框样式?如何...
  • 微信小程序vant 输入框问题

    千次阅读 2020-07-11 16:29:00
    个别手机弹出后会导致输入框位置乱跳,问题原因是van-popup多次弹出数据渲染会有一定问题 2.van-field 搭配 van-overlay(遮罩) 遮罩弹出太慢,手机性能比较差的体验太差 3.IOS自动推上去内容跑掉 处理方案: 自义...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,005
精华内容 1,602
关键字:

微信小程序输入框样式

微信小程序 订阅