精华内容
下载资源
问答
  • 主要介绍了微信小程序 input输入框控件详解及实例(多种示例)的相关资料,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,需要的朋友可以参考下
  • 主要介绍了微信小程序 input输入框详解及简单实例的相关资料,需要的朋友可以参考下
  • 1、传值:index下标传值、页面navigator传值 (此图片来源于网络,如有侵权,请联系删除! )(此图片来源于网络,如有侵权,请联系删除! )(此图片来源于网络,如有侵权,请联系删除! )(此图片来源于网络,如有侵权,请...
  • 小程序提供了一个password属性,用来表示是否是密码类型。 关键思路:动态改变password的值,从而实现密码的显示与隐藏。 3.实现代码 // pages/cssCase/inputPass/index.js Page({ data: { open: false,//默认不...

    1.实现效果

    在这里插入图片描述

    2.实现原理

    input的type之中并无password属性。
    在这里插入图片描述

     小程序提供了一个password属性,用来表示是否是密码类型。
    

    关键思路:动态改变password的值,从而实现密码的显示与隐藏。

    3.实现代码

    // pages/cssCase/inputPass/index.js
    Page({
      data: {
        open: false,//默认不显示密码
        focus:false,//是否获取焦点
      },
      switch() {
        this.setData({
          open: !this.data.open
        })
      },
      focus(){
        this.setData({
          focus:true
        })
      },
      blur(){
        this.setData({
          focus:false
        })
      }
    
    })
    
    <view class="mb20">小程序的type木有password属性,但有password,判断是否是密码类型</view>
    <view class="flex-row j_b">
      <view class="flex-row fill_box">
        <text>密码:</text>
        <input type="text" password="{{!open}}" placeholder="请输入密码" bindfocus="focus" bindblur="blur"  class="{{focus?'ative':''}}"/>
      </view>
      <image src="{{open?'../img/open_eye.png':'../img/no_eye.png'}}" class="eye" catchtap="switch" />
    </view>
    
    page {
      padding: 40rpx;
      background-color: #fff;
    }
    
    .eye {
      width: 40rpx;
      height: 40rpx;
      margin-left: 20rpx;
      flex-shrink: 0;
    }
    
    .fill_box {
      font-size: 25rpx;
      color: #333;
      flex: 1;
    }
    
    .fill_box text {
      margin-right: 25rpx;
    }
    
    .fill_box input {
      border-bottom: 1px solid #ccc;
      flex: 1;
    }
    .ative{
      border-bottom: 1px solid #1b347a!important;
    }
    
    .mb20 {
      margin-bottom: 40rpx;
      font-size: 25rpx;
      font-weight: bold;
      color: #333;
    }
    

    4.更多小程序demo,关注苏苏的码云

    展开全文
  • 主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
  • maxlength 这个属性可以控制input可输入的最大字符数量,我自己百度发现没找到就自己去文档看的,

    maxlength 这个属性可以控制input可输入的最大字符数量,我自己百度发现没找到就自己去文档看的,
    在这里插入图片描述

    展开全文
  • 微信小程序 bindinput 没有响应 问题: 微信小程序 bindinput 没有响应 解决方法:要 ...

    微信小程序 input 输入框控件 bindinput 没有响应


    问题:
    微信小程序 input 输入框控件 bindinput 没有响应

    原因:
    我以为是我这边的问题,检查很多遍检查不出来,最后换个库好了,截至北京时间2019.11.26 16:48,我用的2.9.3调试库还是有问题

    解决方法:
    等修复,或换个库来调试,我随便找了个2.6.0可以了


    维尼聚合工具


    展开全文
  • 主要介绍了微信小程序input框中加入小图标的实现方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 本文采用的是动态联想,即在input框中输入关键字后,将关键字作为条件去数据库查询,然后将所有查询结果以json格式返回给小程序的js文件,最后用关键字去匹配返回结果,并将结果中的关键字高亮显示。具体效果如下图...

    找了好多博客都没有找到关于小程序,模糊查询,自动联想,和关键字高亮显示的文章,没办法,自己造吧。

    本文采用的是动态联想,即在input框中输入关键字后,将关键字作为条件去数据库查询,然后将所有查询结果以json格式返回给小程序的js文件,最后用关键字去匹配返回结果,并将结果中的关键字高亮显示。具体效果如下图所示:
    在这里插入图片描述
    不说其他废话了,直接上干货:
    js文件

    // pages/search/search.js
    Page({
      data: {
        // 模糊查询时长
        timer: 0,
        // 点击结果项之后替换到文本框的值
        inputValue: '',
        // 是否隐藏模糊查询的面板
        hideScroll: true,
        // 历史查询记录
        historySearch: wx.getStorageSync('historySearch') || [],
        // 模糊查询结果
        searchTip: []
      },
    
      // onConfirm(e) {
      //   const keyword = e.detail.value
    
      //   console.log('keyword:', keyword)
      //   if (keyword) {
      //     this.addHistorySearch(keyword)
      //     this.searchByKeyWord(keyword)
      //     this.setData({
      //       keyword: keyword
      //     })
      //   }
      // },
      getInf(str, key) {
        return str
          .replace(new RegExp(`${key}`, 'g'), `%%${key}%%`)
          .split('%%')
          .filter(item => {
            if (item) {
              return true
            }
            return false
          })
      },
    
      onInput(e) {
        const inputValue = e.detail.value
    
        clearTimeout(this.data.timer)
        let timer = setTimeout(() => {
          if (inputValue) {
            // 如果输入的关键字不为空,则发起请求获取联想值
            const tips = [
              { tip: '城市', content: '北京' },
              { tip: '大学', content: '北京大学' },
              { tip: '专业', content: '北京测绘工程' }
            ]
    
            const newTips = tips.map(item => {
              const { tip, content } = item
    
              const newContent = this.getInf(content, inputValue)
    
              return { tip, content: newContent }
            })
    
            console.log('newTips:', newTips)
    
            this.setData({
              inputValue: inputValue,
              searchTip: newTips,
              hideScroll: false
            })
            return
          }
          // 如果为空,则收起
          this.setData({
            searchTip: [],
            hideScroll: true,
            inputValue: ''
          })
        }, 600)
    
        this.data.timer = timer
      },
      itemtap(e) {
        const { info } = e.currentTarget.dataset
    
        this.setData({
          // 将点击选择的值展示在input框中
          inputValue: info.content.join(''),
          // 当用户选择某个联想词,隐藏下拉列表
          hideScroll: true
        })
        this.addHistorySearch(info)
        // 发起请求,获取查询结果
        this.searchByKeyWord(info)
      },
      searchByKeyWord(info) {
        // 发起请求,获取面板数据
      },
      addHistorySearch(value) {
        const historySearch = wx.getStorageSync('historySearch') || []
        // 是否有重复的历史记录
    
        let has = false
    
        for (let history of historySearch) {
          const { content } = history
    
          if (value.content === content) {
            has = true
            break
          }
        }
    
        if (has) {
          return
        }
    
        const len = historySearch.length
    
        if (len >= 8) {
          historySearch.pop()
        }
    
        historySearch.unshift(value)
        wx.setStorage({
          key: 'historySearch',
          data: historySearch,
          success: () => {
            this.setData({ historySearch: historySearch })
          }
        })
      }
    })
    

    wxml文件:

    <wxs src="../../utils/utils.wxs" module="util" />
    <view>
        <view class="seachBar">
            <image src="/images/search.png" style="width:40rpx;height:40rpx" />
            <input value="{{inputValue}}" focus='true' confirm-type="search" placeholder="搜索感兴趣的城市、大学、专业" bindinput="onInput" />
        </view>
        <view class="line"></view>
        <view class="search-box" wx:if="{{!inputValue&&historySearch.length>0}}">
            <view class="border-title">历史搜索</view>
            <view class="search-content">
                <block wx:for="{{historySearch}}" wx:key="*this">
                    <view class="search-item">{{util.join(item.content)}}</view>
                </block>
            </view>
        </view>
        <scroll-view scroll-y="true" class="search-res" hidden="{{hideScroll}}">
            <view class="sum">共找到和“{{inputValue}}”相关的结果{{searchTip.length}}个</view>
            <block wx:for="{{searchTip}}" wx:key="content">
                <view class="tip-item" bindtap="itemtap" data-info="{{item}}">
                    <view class="left">
                        <view class="tip">{{item.tip}}</view>
                        <view class="content">
                            <view wx:for="{{item.content}}" wx:for-item="textItem" wx:key="{{index}}" class="{{textItem == inputValue ? 'searchHigh' : '' }}">
                                {{textItem}}
                            </view>
                        </view>
                    </view>
                    <image src="/images/right.png" style="width:36rpx;height:36rpx" />
                </view>
            </block>
        </scroll-view>
    </view>
    

    wxss文件:

    /* pages/search/search.wxss */
    
    .seachBar {
        display: flex;
        flex-direction: row;
        padding-left: 34rpx;
    }
    
    .seachBar input {
        margin-left: 18rpx;
    }
    
    .line {
    
        box-sizing: border-box;
        border: 2rpx solid rgba(235, 235, 235, 1);
        margin-top: 28rpx;
        margin-left: 40rpx;
        margin-right: 40rpx;
    }
    
    .search-box {
        margin-top: 50rpx;
        margin-left: 40rpx;
    }
    
    .border-title {
        font-size: 36rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }
    
    .search-content {
        display: flex;
        flex-direction: row;
        margin-top: 2rpx;
        flex-wrap: wrap;
        margin-right: -30rpx;
        /* margin-top: -30rpx; */
    }
    
    .search-item {
        /* width: 160rpx; */
        padding-left: 28rpx;
        padding-right: 28rpx;
        line-height: 62rpx;
        background: rgba(245, 245, 245, 1);
        border-radius: 12rpx;
        text-align: center;
        margin-right: 30rpx;
        margin-top: 30rpx;
    }
    
    .sum {
        margin-bottom: 20rpx;
        margin-top: 20rpx;
    }
    
    .tip-item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: 144rpx;
        border-bottom: 2rpx solid rgba(235, 235, 235, 1);
    }
    
    .left {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .tip {
        width: 64rpx;
        line-height: 38rpx;
        text-align: center;
        background: rgba(245, 245, 245, 1);
        border-radius: 6px;
    
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
    }
    
    .content {
        display: flex;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 44rpx;
        color: rgba(51, 51, 51, 1);
        margin-left: 22rpx;
    }
    
    .search-res {
        box-sizing: border-box;
        padding-left: 40rpx;
        padding-right: 40rpx;
    }
    
    .searchHigh {
        color: #37C2BC;
    }
    

    注释比较清楚了,多看几遍就懂了,关键字高亮的思想就是,将需要展示的文本,根据关键字进行拆成数组,然后再根据关键字判断是否需要高亮。如果有不懂的可以加我微信qdw1370336125相互交流。
    在这里插入图片描述

    展开全文
  • 用uniapp 开发微信小程序时,输入框聚焦focus事件,点击输入框时,ios端是只触发一次的,但在android端却触发了2次,因为需求要求聚焦时要请求数据并且还有移动端分页,数据累加等,就会使得获取到的数据重复了一遍...
  • 微信小程序input输入框控制金额格式

    千次阅读 2020-06-13 14:29:53
    控制输入框只能输入为金额格式的 东西。 // 给input 输入框绑定需要的值,然后绑定一个bindinput方法 <input value="{{editForm.priceFL}}" class="editShopName" bindinput="priceTap" placeholder="请输入...
  • 微信小程序input输入框添加删除按钮,真机focus时无法删除 原因:真机测试输入框获得焦点时层级会比删除图标更高,所以点不到删除图标。 解决方案:缩小输入框的宽度,使之获得焦点时不会覆盖删除图标。 input { ...
  • 微信小程序input输入框屏蔽非法字符 wxml文件 <view class="numOfChildren"> <sapn class="title">非法输入内容验证</sapn> <input value="{{numOfChildrenREsult}}" bindblur=...
  • 实现思路:取到input里面的值,然后我们将button和input值进行动态绑定 我们可以在data定义变量 X:" ",然后我们取到input值,利用this.setData方法赋值为全局变量 <input bindinput="getNumber" placeholder="请...
  • 情景:使用了vant组件,但我发现用原生的也会有这个问题。...三、输入框的长度定死,还是闪烁,有重影 四、换成textarea,不闪烁了,但无法调出不一样的键盘,如数字键盘、身份证键盘,不能这么改。 ...
  • input bindinput="moneyInput" type='digit' maxlength='10' /> moneyInput(e) { var money; if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证,提现金额小数点后不能大于两位数字 money = e...
  • 微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的,比较常见的地方,如:登录、注册、搜索等。 另外输入框在不同的场景下,也会有不同的样式。 这里给大家示范一下各种场景下的实例效果...
  • 小程序上使用之前得先介绍一下防抖。无非就是将一个频繁的操作延迟触发并且同时减少触发次数。 本质就是利用闭包保存定时器数据,并且在延迟时间内频繁触发会清除上一次的定时器操作。最后能触发的只能是触发事件...
  • 微信小程序自动完成文本框autocompletetext 仅供参考!!!!!!
  • 本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码,供大家参考,具体内容如下 效果图 WXML 默认 <button class=tui-number-cell bindtap=nextNum>-</button> <input class=tui-...
  • 本文实例讲述了微信小程序实现简单input正则表达式验证功能。分享给大家供大家参考,具体如下: 1、效果展示 2、关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> ...
  • 微信小程序输入框input中的值赋值给变量 js代码如下: data里面的input就是局部变量,我用他来接收输入框中的值, bindinput是输入框输入时触发的事件。 输入时,就触发赋值事件,e.detail.value就是输入框中的值...
  • 1.微信小程序的input不支持letter-spacing的属性 2.将input的宽度设置成250%(注意,父元素需要设置overflow:hidden,否则在苹果手机上将出现滑动),并设置absolute定位将input输入框定位出当前页面。 3.将input...
  • 相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改,该方法仅适用于微信小程序。 一、我们要给placeholder定义一个...
  • Iphone XS 效果 Iphone 8效果 微信官方自带键盘弹起时,自动上推页面的方法...当输入框获得焦点时候,也就是调用focus方法时候, e.detail.height官方方法,可以得到键盘的高度,将这个值动态的赋予bottom,就不会被...

空空如也

空空如也

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

微信小程序input输入框

微信小程序 订阅