精华内容
下载资源
问答
  • 2022-04-27 19:41:35

    之前做过的小程序里面这种功能不是太重要,所以有点小瑕疵也一直没去理它。但是这次的小程序有一个话题评论功能,要求比较高,查csdn翻文档好半天终于实现了

    第一步:输入框固定在页面底部 + 适配底部安全区

    <view class="bottom-view">
        <view class="bottom-input" style="padding-bottom: {{inputBottom}}rpx;">
            <textarea v-model="myComment" :maxlength="-1" :adjust-position="false" :auto-height="true" :fixed="true" confirm-type="done" :hold-keyboard="true" @focus="inputFocus" @blur="inputBlur" @confirm="inputConfirm" :placeholder="placeholder" @keyboardheightchange="keyboardheightchang"/>
        </view>
    </view>
    	// 适配的底部外容器
    	.bottom-view{
    		position: fixed;
    		z-index: 99999;
    		bottom: 0;
    		padding-bottom: env(safe-area-inset-bottom);
    	}
    	.bottom-input{
    		background-color: #FFFFFF;
    		border-top: 1px solid #f5f5f5;
    		width: 100vw;
    		padding: 30rpx;
    	}

    第二步:固定页面 + 将输入框顶起来显示在软键盘上方  textarea文档

    将textarea的adjust-position属性置为false  保证页面不移动

    监听键盘高度,将输入框顶起

    keyboardheightchang(e){
        this.inputBottom = e.detail.height * this.proportion + 20
    },

     其实也没辣么难 =v=

    更多相关内容
  • 自定义输入框、input框opacity无效

    wxml: 

    <view class="codeBox">
      <view class="codeMain">
        <view class="codeInp" catchtap="setFocus">
          <view class="code">{{ code[0] ? '·' : '' }}</view>
          <view class="code">{{ code[1] ? '·' : '' }}</view>
          <view class="code">{{ code[2] ? '·' : '' }}</view>
          <view class="code">{{ code[3] ? '·' : '' }}</view>
        </view>
        <input class="codeInpContent" type="number" maxlength="4" focus="{{code_isFocus}}" bindinput="getCode" />
      </view>
    </view>

     js:

    Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        code_isFocus: true, // 控制input 聚焦
        code: [],
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        //聚焦input
        setFocus() { 
          this.setData({
            code_isFocus: true
          })
        },
    
        // 监测用户输入
        getCode(e) {
          this.setData({
            code: e.detail.value
          });
          if (this.data.code.length == 4) { // 输入完成
            
          }
        },
      }
    })

    wxss:

    注意:input框不能用opacity0控制隐藏,手机测试会出现无法隐藏问题,width / height 设置为0即可

    .codeBox {
      width: 100%;
      box-sizing: border-box;
      padding: 0 54rpx;
      margin-bottom: 42rpx;
    }
    .codeBox .codeMain {
      position: relative;
    }
    .codeBox .codeInp {
      display: flex;
      justify-content: space-between;
    }
    .codeBox .codeInp .code {
      width: 120rpx;
      height: 120rpx;
      box-sizing: border-box;
      border: 2rpx solid #CCCDCF;
      border-radius: 12rpx;
      color: #0C1733;
      font-size: 80rpx;
      font-weight: 800;
      line-height: 120rpx;
      text-align: center;
    }
    .codeBox .codeInpContent {
      width: 0;
      height: 0;
      position: absolute;
      left: 0;
      top: 0;
    }

    展开全文
  • 微信小程序自定义文本输入框

    千次阅读 2022-03-18 15:55:46
    文本弹窗类结束.............................................*/ 经过上面的修改已经可以弹出一个文本框了 微信小程序文本框输入 这里没有把代码也引用,因为这样做太复杂了! 补充说明: 上面的处理有一个地方没有说,...

    本文摘录于:https://blog.csdn.net/ZNYSYS520/article/details/81878598-只是做学习备份之用,绝无抄袭之意,有疑惑请联系本人!
    这里参考git仓库,然后自行整理:https://gitee.com/waf2311/WeChatDiyModal.git
    1.建立文件:component\modal\modal.wxml
    在这里插入图片描述
    他的内容如下:

    <!--文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598-->
    <template name="TextPopupBox">
    <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{hintinfo.ishow}}"></view>
    <view class="modal-dialog" wx:if="{{hintinfo.ishow}}">
      <view class="modal-title">{{hintinfo.title}}</view>
      <view class="modal-content">
        <view class="modal-input">
          <input placeholder-class="input-holder" type="number"  bindinput="inputChange" class="input" placeholder="{{hintinfo.inputplaceholder}}"  maxlength="11"></input>
        </view>
      </view>
      <view class="modal-footer">
        <view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{hintinfo.canletext}}</view>
        <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{hintinfo.confirmtext}}</view>
      </view>
    </view>
    </template>
    

    2.在需要弹窗的page的wxml文件中,这样来引用:
    在这里插入图片描述

    <import   src="../../component/modal/modal.wxml" />
    <template is="TextPopupBox" data="{{hintinfo}}"/>
    

    3.在page的js文件的data字段中加入如下声明:
    在这里插入图片描述

        /*文本弹窗类的特定数据
        *ishow是否显示,默认不显示
        *title弹窗标题,数据过多的时候会分行显示
        *inputplaceholder输入框预输入内容
        *inputValue当前输入的值,onConfirm事件可通过该值确定输入的内容
        *confirmtext确认按钮显示的文字
        *canletext取消按钮显示的文字
        */ 
        hintinfo: {
          ishow: false,
          title: "注意:手机号是获取云文件的凭证,输入错误将获取不到之前的文件",
          inputplaceholder: "请输入手机号",
          inputValue: "",
          confirmtext: "确定",
          canletext: "取消"
        },
    

    3.在page的js文件加入如下代码:
    在这里插入图片描述

    /*.............................................文本弹窗类开始.............................................*/ 
      /**
       * 文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598
       */
      showDialogBtn: function() {
        var that = this;
        var _hintinfo = that.data.hintinfo;
        _hintinfo.ishow = true;
    
        that.setData({
          hintinfo: _hintinfo
        })
      },
      /**
       * 弹出框蒙层截断touchmove事件
       */
      preventTouchMove: function () {
      },
      /**
       * 隐藏模态对话框
       */
      hideModal: function () {
        var that = this;
        var _hintinfo = that.data.hintinfo;
        _hintinfo.ishow = false;
    
        that.setData({
          hintinfo: _hintinfo
        })
      },
      /**
       * 对话框取消按钮点击事件
       */
      onCancel: function () {
        this.hideModal();
        util.showHintModal("请注意:取消输入将不能够获取到云文件,并且和文件相关功能不能够使用");
      },
      /**
       * 对话框确认按钮点击事件
       */
      onConfirm: function (res) {
        this.hideModal();
        console.log("set phone:",this.data.hintinfo.inputValue)
        if(this.data.hintinfo.inputValue.length!=11)
        {
          util.showHintModal("手机号格式错误,请重新输入!");
          this.showDialogBtn()
        }
      },
      /**
       * 对话框湿输入数据改变事件
       */
      inputChange: function (res) {
        this.data.hintinfo.inputValue = res.detail.value; 
      }
      /*.............................................文本弹窗类结束.............................................*/ 
    

    经过上面的修改已经可以弹出一个文本框了

    微信小程序文本框输入

    在这里插入图片描述
    这里没有把代码也引用,因为这样做太复杂了!

    补充说明:
    上面的处理有一个地方没有说,其实不算完整,就是wxss文件没有做说明,要让一个wxml文件能够布局成功,这里还必须要用wxss里面的对象做辅助,所以修改modal目录下增加一个modal.wxss文件:
    在这里插入图片描述

    /* component\modal\modal.wxss*/
    .show-btn {
    margin-top: 100rpx;
    color: #22cc22;
    }
    
    .modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
    }
    
    .modal-dialog {
    width: 540rpx;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 9999;
    background: #f9f9f9;
    margin: -180rpx 105rpx;
    border-radius: 36rpx;
    }
    
    .modal-title {
    padding-top: 50rpx;
    font-size: 36rpx;
    color: #030303;
    text-align: center;
    }
    
    .modal-content {
    padding: 50rpx 32rpx;
    }
    
    .modal-input {
    display: flex;
    background: #fff;
    border: 2rpx solid #ddd;
    border-radius: 4rpx;
    font-size: 28rpx;
    }
    
    
    .input {
    width: 100%;
    height: 82rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: #333;
    }
    
    input-holder {
    color: #666;
    font-size: 28rpx;
    }
    
    .modal-footer {
    display: flex;
    flex-direction: row;
    height: 86rpx;
    border-top: 1px solid #dedede;
    font-size: 34rpx;
    line-height: 86rpx;
    }
    
    .btn-cancel {
    width: 50%;
    color: #666;
    text-align: center;
    border-right: 1px solid #dedede;
    }
    
    .btn-confirm {
    width: 50%;
    color: #ec5300;
    text-align: center;
    }
    

    在需要引用modal的地方载入这个文件:
    在这里插入图片描述

    @import "../../component/modal/modal" ;
    

    为了方便书写,wxml文件也不包含文件后缀:
    在这里插入图片描述

    <import   src="../../component/modal/modal" />
    <template is="TextPopupBox" data="{{...hintinfo}}"/>
    

    补充说明

    经过上次的修改后,modal.wxml文件中不再适合直接引用hintinfo变量,而是直接引用其内部成员,注意模块引用方法修改如下:

    <import   src="../../component/modal/modal" />
    <template is="TextPopupBox" data="{{...hintinfo}}"/>
    

    modal.wxml文件内容如下:

    <!--文本弹窗https://blog.csdn.net/ZNYSYS520/article/details/81878598-->
    <template name="TextPopupBox">
    <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{ishow}}"></view>
    <view class="modal-dialog" wx:if="{{ishow}}">
      <view class="modal-title">{{title}}</view>
      <view class="modal-content">
        <view class="modal-input">
          <input placeholder-class="input-holder" type="number"  bindinput="inputChange" class="input" placeholder="{{inputplaceholder}}"  maxlength="11"></input>
        </view>
      </view>
      <view class="modal-footer">
        <view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{canletext}}</view>
        <view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{confirmtext}}</view>
      </view>
    </view>
    </template>
    
    展开全文
  • <view catchtap='...-- 密码输入框 --> <view wx:if='{{showPayPwdInput}}'> <view class='bg_layer'></view> <view class='input_main'> <view class='input_title'&g.
    <view catchtap='showInputLayer' class="btn_pay">立即支付</view>
    <!-- 密码输入框 -->
    <view wx:if='{{showPayPwdInput}}'>
        <view class='bg_layer'></view>
        <view class='input_main'>
            <view class='input_title'>
                <view class='input_back' catchtap='hidePayLayer'><text></text></view>
                <text>输入支付密码</text>
            </view>
            <view class='input_tip'><text>使用会员卡余额支付需要验证身份,验证通过后才可进行支付。</text></view>
            <view class='input_row' catchtap='getFocus'>
                <view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'>
                    <text wx:if='{{pwdVal.length>i}}'></text>
                </view>
            </view>
            <view class='forget_pwd' catchtap='hidePayLayer'>忘记密码</view>
            <input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd' maxlength='6'/>
        </view>
    </view>
    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        showPayPwdInput: false,  //是否展示密码输入层
        pwdVal: '',  //输入的密码
        payFocus: true, //文本框焦点
      },
      onLoad: function () {
        this.showInputLayer();
      },
      /**
       * 显示支付密码输入层
       */
      showInputLayer: function(){
        this.setData({ showPayPwdInput: true, payFocus: true });
      },
      /**
       * 隐藏支付密码输入层
       */
      hidePayLayer: function(){
        
        var val = this.data.pwdVal;
    
        this.setData({ showPayPwdInput: false, payFocus: false, pwdVal: '' }, function(){
          wx.showToast({
            title: val,
          })
        });
    
      },
      /**
       * 获取焦点
       */
      getFocus: function(){
        this.setData({ payFocus: true });
      },
      /**
       * 输入密码监听
       */
      inputPwd: function(e){
          this.setData({ pwdVal: e.detail.value });
    
          if (e.detail.value.length >= 6){
            this.hidePayLayer();
          }
      }
    })
    .btn_pay{
      margin: 100rpx auto; width: 600rpx; height: 100rpx; line-height: 100rpx; border-radius: 100rpx;
      background-color: #d3a95a; color: #fff; font-size: 36rpx; text-align: center; 
    }
    /* 支付密码css start */
    .bg_layer{
      position: fixed; left: 0; top: 0; bottom: 0; right: 0;
      background-color: rgba(0, 0, 0, 0.6); z-index: 9998;
    }
    .input_main{
        position: fixed; left: 0; bottom: 500rpx; width: 100%; height: 394rpx;
        background-color: #fff; z-index: 9999;
    }
    .input_title{
        width: 100%; height: 90rpx; line-height: 90rpx; text-align: center; 
        font-size: 32rpx; border-bottom: 1rpx solid #e2e2e2;
    }
    .input_back{
        position: absolute; left: 0; top: 0;
        width: 80rpx; height: 90rpx; display: flex; justify-content: center; align-items: center;
    }
    .input_back text{
      width: 20rpx;
      height: 20rpx;
      background-color: white;
      border: 1rpx solid #aaa;
      border-width: 5rpx 0 0 5rpx;
      transform: rotate(-45deg);
    }
    
    .input_tip{  margin: 30rpx; font-size: 24rpx; color: #888; }
    
    /* 密码掩码模拟 */
    .input_row{
      width: 690rpx; margin: 0 auto; height: 98rpx; position: relative;
      display: flex; align-items: center; border: 1rpx solid #e2e2e2; border-radius: 20rpx;
    }
    .input_row .pwd_item{
      flex: 1; display: flex; align-items: center; justify-content: center; 
      height: 100%; border-right: 1rpx solid #e2e2e2; position: relative;
    }
    .pwd_item:nth-last-of-type(1) { border-right: 0; } 
    .pwd_item text { 
      width: 30rpx; height: 30rpx; border-radius: 30rpx; background-color: #555;
    }
    
    
    .forget_pwd{ 
      float: right; margin: 30rpx; width: 100rpx; text-align: right; font-size: 24rpx; color: #ff7800;
    }
    
    /* 文本输入框位置: 设置到左边隐藏 */
    .input_control { 
      position: relative; left: -300rpx; bottom: 0; width: 100rpx; height: 100rpx;
    }

    展开全文
  • 微信小程序实现自定义input输入框

    千次阅读 2021-11-15 19:17:29
    1.微信小程序的input不支持letter-spacing的属性 2.将input的宽度设置成250%(注意,父元素需要设置overflow:hidden,否则在苹果手机上将出现滑动),并设置absolute定位将input输入框定位出当前页面。 3.将input...
  • 微信小程序开发初学:输入框 - input

    千次阅读 2021-01-27 11:40:30
    输入框。 input具有的属性 value 类型:String 默认值:无 输入框内的初始内容 type 类型:String 默认值:text 输入内容的类型 type属性的合法值 (1)text:输入文本 (2)number:输入数字(弹出数字键盘) (3)...
  • 小程序密码输入框

    千次阅读 2018-08-17 10:11:06
    小程序密码输入框。 初始状态为input不能点击。 点击input以后弹出键盘。输入框全部输入以后可以点击提交。   具体代码: &lt;view class="Toptitle"&gt;请设置支付密码并妥善保管&...
  • 微信小程序 border设置单边框失效解决办法遇到的问题解决的方法总结 遇到的问题 border-right: 1 rpx solid #ccc; border-bottom: 1 rpx solid #ccc; 这样之后发现边框没有显示出 解决的方法 border-right: 1...
  • 弹出框用了vant小程序的ui,需要下载。也可以不用,抽取关键代码即可。 vant-weapp:https://vant-contrib.gitee.io/vant-weapp/#/quickstart "usingComponents": { "van-popup": "@vant/weapp/popup/index" }, ...
  • 微信小程序:验证码/密码输入框

    千次阅读 2020-11-03 15:11:03
    一、效果图如下: 二、代码部分: ...-- 输入框(表格) --> <view class='{{(interval?"pay_number":"pay_number_interval")}} {{focus_class?"get_focus":""}}' catchtap="set_focus" style='wid
  • 微信小程序vant 输入框问题

    千次阅读 2020-07-11 16:29:00
    个别手机弹出后会导致输入框位置乱跳,问题原因是van-popup多次弹出数据渲染会有一定问题 2.van-field 搭配 van-overlay(遮罩) 遮罩弹出太慢,手机性能比较差的体验太差 3.IOS自动推上去内容跑掉 处理方案: 自义...
  • 微信小程序:清空输入框信息与实现屏幕往上滚动 微信小程序,是属于小程序的一种,英文名为Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开...
  • 小程序 输入框监听事件

    千次阅读 2018-11-05 16:44:00
    border-radius : 36rpx ; margin-left : 24rpx ; margin-top : 24rpx ; float : left ; position : relative ; } .coupon-exchange .code-input .input { width : 390rpx ; height : 36rpx ; ...
  • 小程序输入框的弹窗

    万次阅读 2019-09-29 17:39:50
    border-top-right-radius: 16rpx; border-top-left-radius: 16rpx; } .toast-main { padding-top: 2vh; padding-bottom: 2vh; background-color: white; text-align: center; } .toast-input { margin-...
  • 微信小程序需要摆放按钮与显示框、输入框,很乱。可以通过下面方式做成一行一行的模块 创建wxml代码 <view class="biaogekuang"> <view class="zicaidan">量程:</view> <view class="hang...
  • 口说无凭,实现效果如下 前端 部分  注册功能 1、wxml文件 <view class=u
  • 纠结很久的点在于如何做到像微信朋友圈那样,点击评论按键,弹出输入框和软键盘,并且输入框的位置刚好对准需要评论的内容底下。 我目前只实现了前半部分,输入框的位置还不能很好地对准内容组件的底部,并且使用感...
  • 微信小程序,验证码输入框

    千次阅读 2019-02-26 13:23:39
    微信小程序,验证码输入微信小程序,验证码输入 微信小程序,验证码输入
  • 相信大伙在开发微信小程序的时候都会遇到这种问题。因为客户的需求,所以我们需要对input框中的placeholder的样式进行修改。接下来告诉大家怎么修改,该方法仅适用于微信小程序。 一、我们要给placeholder定义一个...
  • 之前刚入坑的时候,就收藏了一些小程序相关的好案例,没有前人铺路,也不会有今天的这篇文章。在此特别鸣谢,NAMECZ的博文(https://blog.csdn.net/namecz/article/details/79892451),文章的思路很巧妙。 正文 ...
  • 1.输入框使用(标准书写要求value必填) 1.1value---默认值 1.2placeholder--- <view> <label>骚气网名:</label> <input value="" placeholder="请输入" class="input01" /> </...
  • 在做支付宝小程序时,需求是要弹出密码输入框,然而找遍支付宝官方文档只有可以弹出输入框的my.prompt(需要了解此方法的小伙伴通过https://opendocs.alipay.com/mini/api/vqpy01),但没有弹出可以输入密码框的,于是...
  • 先看效果 代码: index.js const app = getApp() Page({ ... }, }) 主要思路就是,弹出键盘后,不把内容顶起来,我们监听键盘高度变化,自动设置输入框和内容的高度,已达到比较好的体验 完整版预览: 可以扫码体验:
  • box-sizing: border-box; } .info{ width: 750rpx; font-size: 40rpx; display: flex; justify-content: center; font-weight: bold; } .code{ display: flex; justify-content: center; align-items: center; ...
  • 在微信小程序里,设置密码输入框。 非常感谢分享。 原文链接:https://blog.csdn.net/weixin_45727040/article/details/106501412 wxml <view class='parentstyle '> <view class='centerStyle'> <...
  • 微信小程序6位支付密码输入框

    千次阅读 2020-01-20 17:36:55
    之前做过一个微信小程序密码输入框的问题,这里突然想起一个组件,感觉这个也挺常用的,所以特在此记录下,方便使用 这个是github地址:...
  • 微信小程序wxss为输入框添加图标

    千次阅读 2019-08-16 09:49:24
    使用background:url(), 因微信小程序不支持本地图标,所以将本地图片转成base64. 图片转base64 下面首先是wxss内容。 .input-text { height:80rpx; margin: 0 auto; border: 1px solid #d2d2d2; background: url...
  • 小程序提供了一个password属性,用来表示是否是密码类型。 关键思路:动态改变password的值,从而实现密码的显示与隐藏。 3.实现代码 // pages/cssCase/inputPass/index.js Page({ data: { open: false,//默认不...
  • 微信小程序——好看的文字加输入框(文本框)

    千次阅读 多人点赞 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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,547
精华内容 5,418
关键字:

小程序 输入框 boder

友情链接: gps-source.rar