微信小程序 textarea 层级过高问题简单解决方案


Posted in Javascript onOctober 14, 2019

这篇文章主要介绍了微信小程序 textarea 层级过高问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码

<template>
  <view class="ui-textarea">
    <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{ txt }}" placeholder="{{ placeholder }}" bindinput="onInput" bindblur="onBlur" focus="{{focus}}"></textarea>
    <view hidden="{{ hide == false }}" class="{{ txt === ''?'text placeholder':'text'}}" bindtap="onFocus">{{ txt ===''? placeholder:txt }}</view>
  </view>
</template>
<script>
export default {
  config: {
    usingComponents: {}
  },
  behaviors: [],
  properties: {
    placeholder: {
      type: String,
      value: ''
    },
    maxlength: {
      type: Number,
      value: 128
    },
    name: String,
    value: {
      type: String,
      value: ''
    }
  },
  data: {
    hide: true,
    txt: '',
    focus: false
  },
  ready() {
    if (this.data.value != '') {
      this.setData({ txt: this.data.value })
    }
  },
  methods: {
    onFocus() {
      this.setData({ hide: false, focus: true })
    },
    onInput(e) {
      this.setData({ txt: e.detail.value })
    },
    onBlur() {
      this.setData({ hide: true, focus: false })
    }
  }
}
</script>
<style lang="less">
.ui-textarea {
 position: relative !important;

 .textarea.hidden {
  display: block !important;
  position: absolute !important;
  left: -999px;
  right: -999px;
  top: 0;
 }

 .textarea {
  width: 100%;
  box-sizing: border-box;
 }

 .text {
  height: 100%;
  padding: 6px 5px;
  font-size: 14px;
 }

 .placeholder {
  color: #888;
 }
}
</style>

Vue 代码,自己根据需求改一下 ,特别注意,不要用 wx;if 或者 hidden 属性 , wx:if 频繁渲染,虽然可以用,hidden 会出现 部分显示bug,[hidden] 会使auto-height 首次不正确

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js两行代码按指定格式输出日期时间
Oct 21 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
js a标签点击事件
Mar 30 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
js实现点击烟花特效
Oct 14 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
vue递归实现树形组件
Jul 15 Vue.js
vue的路由映射问题及解决方案
Oct 14 #Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 #Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 #Javascript
Vue3 源码导读(推荐)
Oct 14 #Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 #Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 #Javascript
You might like
建立文件交换功能的脚本(二)
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
php中的实现trim函数代码
2007/03/19 PHP
ThinkPHP3.0略缩图不能保存到子目录的解决方法
2012/09/30 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
10款实用的PHP开源工具
2015/10/23 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python ZipFile模块详解
2013/11/01 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
拾金不昧表扬信范文
2014/01/11 职场文书
说明书格式及范文
2014/05/07 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
PyTorch device与cuda.device用法
2022/04/03 Python
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers