精华内容
下载资源
问答
  • 2021-10-09 09:40:38

    微信小程序里面,由于input是原生组件,所以会存在层级穿透的问题,view标签无法覆盖在上面,点击的时候,下面的input组件会被聚焦,下面记录一下解决方法

    解决方法

    1.使用cover-view代替view(不太推荐)

    该方法适合覆盖在上的input标签上的东西样式不太复杂,因为cover-view标签支持的css有缺失,而且cover-view标签在动画切换的时候会最先出现在屏幕中,最迟消失在屏幕中,体验不太好

    2.使用view代替input(推荐)

    input同级创建一个view标签,然后在css中,将2者的样式差别抹平,平时显示view标签,当view标签被点击的时候,通过wx:if切换成input标签,然后获取input的实例,使用input.focus()方法聚焦到input

    优点:

    • 可以封装成组件,直接代替input在项目中使用,也方便以后别的项目中复用
    • 对比方法1,对代码的修改少,不用对代码进行大规模的修改
    更多相关内容
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • 微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 ...
  • 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,...
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 微信小程序input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,...
  • 微信小程序中是不能修改input样式的 甚至修改大小也不能,那么怎么做一个自定义样式的input呢 说一下我做的input的原理 有两张图片 一张是未选中的(input.png)一张是已经选中的 (input_n.png) 更具点击事件bindtap...
  • 微信小程序 input控件高宽设置

    万次阅读 2018-09-19 11:03:34
    微信小程序 input控件高宽设置 在微信小程序中,很多控件设置了感觉没有变化,最近做项目时,遇到了input控件的宽高难以设置问题。 wxml <input class='input-radius' placeholder='请输入项目名称' ...

    微信小程序 input控件高宽设置


    在微信小程序中,很多控件设置了感觉没有变化,最近做项目时,遇到了input控件的宽高难以设置问题。

    wxml
     <input class='input-radius'  placeholder='请输入项目名称' placeholder-class='iconfont icon-sousuo mid-font '   placeholder-style='color:#999999;font-size:14px'  />
     <view style='height:20px;font-size:14px;color:#999999;margin:2px 10px;border-radius:3px;border:thin solid #eee' >搜索</view>
    
    js
    .input-radius{
      border-radius: 15px;
      margin: 0 0 3px 18px;
      width: 270px;
    }
    

    这里我没有设置高度所以显示的是控件自身的高度。
    在这里插入图片描述

    字体我设置的为10px;如果设置input height:10px;生效会很明显看出来,但是结果却没有变化。
    在这里插入图片描述

    后来我通过小程序视图选择,找到了微信小程序input控件原始设置。
    在这里插入图片描述
    上图发现: 我只覆盖了官方input的height,而没有覆盖min-height;

    js
    .input-radius{
      border-radius: 15px;
      margin: 0 0 3px 18px;
      width: 270px;
      height: 0.8rem;
      min-height: 0.8rem;
    }
    

    在这里插入图片描述

    这时候高度终于有变化了。

    最后宽度比较简单,我当初设置%值不起作用,只需要给其一个指定值就可以改变。

    展开全文
  • 微信小程序文本输入<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数字 带小数点的数字键盘模式输入

    完毕

    展开全文
  • 微信小程序input详解

    万次阅读 2018-07-18 20:46:55
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: 左边扫码随时向我提问,上方有QQ群,有兴趣的可以加!!! 我在开发过程中,遇到了一些常见的问题,希望通过这篇文件帮助大家避坑...

    微信小程序开发交流qq群   173683895

       承接微信小程序开发。扫码加微信。

    正文:

    左边扫码随时向我提问,上方有QQ群,有兴趣的可以加!!!

    我在开发过程中,遇到了一些常见的问题,希望通过这篇文件帮助大家避坑···

    问题与解决方法:

     

    1.写输入框的时候,想实时获取输入框的焦点

    用到的事件和属性:

    bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持
    bindblurEventHandle 输入框失去焦点时触发,event.detail = {value: value}

    解决方法:在input写上面的两个事件,然后setData .

    代码:

        <input type="text" bindblur='no_focus' bindfocus="focus" />
      // 获取到焦点
      focus:function(e){
        var that = this;
        console.log(e.detail.height)
        this.setData({
          focus: true,
          input_bottom: e.detail.height
        })
      },
      // 失去焦点
      no_focus: function (e) {
          this.setData({
            focus: false
          })
      },

     

    2.用户在使用输入框时手机输入法的键盘会往上划动,导致页面错乱或者闪屏。

    用到的事件和属性:

    adjust-positionBooleantrue键盘弹起时,是否自动上推页面
    bindfocusEventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持

    解决方案:组件键盘自动上推,然后获取手机键盘的高度,使用定位解决。

    解决方法:给 input 添加 bindfocus 事件并添加 adjust-position='{{false}}'  属性, 通过bindfocus事件获取到输入框的高度,然后再给输入框绝对定位,距离底部的高度登录获取到的高度。

    代码:

        <input style='position: absolute; bottom:{{input_bottom}}px' type="text" adjust-position='{{false}}' bindfocus="focus" />
      focus:function(e){
        console.log(e.detail.height)
        this.setData({
          focus: true,
          input_bottom: e.detail.height
        })
      },

     

    3.用户在使用键盘时,键盘顶部将输入框底部的边框遮挡了,导致下边框消失

    用到的时间和属性:

    cursor-spacingNumber0指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

    解决方法:通过 cursor-spacing 调整键盘与输入框的距离。

    代码:

        <input type="text" cursor-spacing='5' />

    input很简单? 呵呵!!!

    展开全文
  • input placeholder='\u8bf7\u8f93\u5165\u6635\u79f0\uff0c\u624b\u673a\u53f7\uff0c\u5ba2\u6237\u540d\u79f0' ></input>   <!-- 底层input-2 点击后会遮盖上层input-1 --> <input placeholder=...
  • 学习小程序的小伙伴可能会有这样的问题:微信小程序的页面内容要发生改变,在小程序中如何快速的来创造一个格式相同,但仅仅改变内容且易于改变的页面呢?接下来就来解决这个问题吧。 解决方案 整体思路是创建一个...
  • 相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改,该方法仅适用于微信小程序。 一、我们要给placeholder定义一个...
  • 微信小程序原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的层级是最高的,页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。...
  • 微信小程序input失焦异常

    千次阅读 2021-01-16 13:08:35
    1.问题描述初始打开页面,input框自动聚焦,在输入n位数字后自动触发事件进行业务处理,结果以页面底部弹框形式展示,同时input失焦。但目前问题是,底部弹框出现后,input再次获得焦点,导致键盘弹起,阻挡住底部...
  • 微信小程序——input 搜索框样式

    千次阅读 2020-08-26 21:31:46
    input class="search-input" maxlength="10" bindinput="bindKeyInput" placeholder-class="search-placeholder" placeholder="搜索工作名称"/> .wxss文件 .search-input { position: relative; width: 686...
  • 微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存。以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态;  2.点击编辑按钮时,文字切换成“保存”,身份证input保持始终不可修改...
  • 微信小程序input 边框

    千次阅读 2021-04-07 19:44:16
    微信小程序input 边框 文章目录 微信小程序input 边框 一、边框:border 设置对象边框的特性。 二、相关属性 一、边框:border 设置对象边框的特性。 语法:border:length style color style:none ,hidden,...
  • 最近入坑小程序,要求在小程序的输入框中展示一个小图标,...然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,右边是input框,w
  • 微信小程序Input组件聚焦问题兼容

    千次阅读 2020-07-16 15:24:16
    微信小程序Input组件聚焦问题兼容 前言 最近小程序做得很频繁,无论是原生的还是使用跨端框架。然后一直以来都被小程序的Input组件搞得死去活来,最近在搞的小程序普遍都有表单,其中的Input清除内容以及聚焦弹起...
  • 微信小程序input组件宽度无法改变

    千次阅读 2019-03-02 14:42:54
    input组件有个默认的宽高,在使用flex布局的时候,发现会影响到页面的布局,就是无法修改其宽度了。若要修改input组件的宽度,最好不要让它处在flex布局当中。 ...
  • 1. view <view class="bottom-wri-box" :style="{bottom: bottomHeight}"> <image @tap="changeChander" class="left-cont-icon" :...input :adjust-position="flasFlag" @confirm="AddSendMess" class=
  • 微信小程序input输入框的bindinput,每输入一个字符都会触发一次,为了避免频繁触发bindinput绑定的函数,可采用”防抖“功能。防抖:在执行bindinput时,第一次触发时,会先设置一个定时器,比如定时1000ms(1秒),...
  • 微信小程序实现自定义input输入框

    千次阅读 2021-11-15 19:17:29
    1.微信小程序input不支持letter-spacing的属性 2.将input的宽度设置成250%(注意,父元素需要设置overflow:hidden,否则在苹果手机上将出现滑动),并设置absolute定位将input输入框定位出当前页面。 3.将input...
  • 输入框组件(参考小程序文档)写的相当清楚。。 <view> <text>请输入第一个数字</text> <input type='number'value='点击此处输入数字'/> </view> <view> <text> 请...
  • 微信小程序 输入框 input 组件

    千次阅读 2021-05-30 22:17:26
    完整微信小程序(Java后端) 技术贴目录清单页面(必看) 输入框。该组件是原生组件,使用时请注意相关限制 属性 类型 默认值 必填 说明 最低版本 value string 是 输入框的初始内容 1.0.0 type string ...
  • 微信小程序input使用

    千次阅读 2019-04-19 11:06:59
    这个input 自己也是花费了2个多小时,熟悉,下面将一一讲解经常使用的里面的属性 value 这个value 就是input中的内容, 如果我们想获取input中输入的内容,value是必须使用的 使用可以在input中 定义 value='{{...
  • 微信小程序原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的层级是最高的,页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,所以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,210
精华内容 3,284
关键字:

微信小程序input样式

微信小程序 订阅