支付宝小程序实现类似微信多行输入功能(思路详解)

更新时间：2024年02月22日 09:28:23 作者：拙慕JULY

这篇文章主要介绍了支付宝小程序实现类似微信多行输入功能,输入超过 8 行的时候会出现滚动,这样做的好处就是输入框不会直接顶到页面最顶部,支付宝小程序实现多行输入框：使用textarea多行输入框实现,感兴趣的朋友一起看看吧

思路一：

textarea 标签设置max-height, 标签自带属性auto-height自动增高

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
  </view>
</view>
// css 
.textarea {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

实际效果最大高度未生效, 会一直增高，该方法不行

思路二

多行文本框套一个容器，容器设置最大高度并y轴滚动，

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" auto-height maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}">
      </textarea>
    </view>
  </view>
</view>
// css
.textarea-content {
  max-height: 150rpx !important;
  overflow-y: scroll;
}

可以实现，但是ios会出现如下问题，超出的文本全选中会在页面透漏出光标，光标在滚动层里也会透出

思路三

多行文本框设置绝对定位高度设置100%，增加一个兄弟元素设置max-height，监听输入事件记录输入的value, 把value放到兄弟元素里，由兄弟元素撑开父元素，随之文本框也自动增高和减少

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput"  maxlength="{{-1}}"  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <text class="textarea-brother">{{value}}</text>
    </view>
  </view>
</view>
// css
.textarea-content {
  position: relative;
}
.textarea {
  height: 100%;
  position: absolute;
  top: -150rpx;
  height: 100%;
  width: 100%;
}
.textarea-brother {
  width: 100%;
  min-height: 42px;
  display: block;
  max-height: 150rpx;
  word-break: break-all;
  word-wrap: break-word;
}

解决了光标超出滚动层的问题，但是input只能监听输入到输入框的字，输入法切换到中文，会先用拼音占输入框的高度，期望高度也是可以增高的，但是由于监听不到输入事件，这种处理方法会遮盖拼音

最终解

找到了支付宝原生组件的样式表https://open.alipay.com/portal/forum/post/120501011

通过命名可以猜测这个是文本输入框内容样式class属性值，通过修改样式设置 max-height, 自动增高开启就完美实现多行输入到一定高度不再增高，进行滚动

<view class="test">
  <view class="top">
  </view>
  <view class="footer">
    <view class="textarea-content">
      <textarea placeholder="Input multiple lines" onInput="onInput" maxlength="{{-1}}" auto-height  class="textarea" show-count="{{false}}" enableNative="{{false}}"></textarea>
      <!-- <text class="textarea-brother">{{value}}</text> -->
    </view>
  </view>
</view>
// css
.textarea {
  .a-textarea-content {
    max-height: 150rpx !important;
  }
}

效果如下：

到此这篇关于支付宝小程序实现类似微信多行输入功能的文章就介绍到这了,更多相关支付宝实现微信多行输入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序输入多行文本的实战记录

JavaScript实现为指定对象添加多个事件处理程序的方法
这篇文章主要介绍了JavaScript实现为指定对象添加多个事件处理程序的方法,可实现让指定对象处理多个事件的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-04-04
微信小程序实现消息框弹出动画
这篇文章主要为大家详细介绍了微信小程序实现消息框弹出动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
浅谈JavaScript 覆盖原型以及更改原型
下面小编就为大家带来一篇浅谈JavaScript 覆盖原型以及更改原型。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随过来看看吧
2016-08-08
JavaScript工厂模式详解
这篇文章主要介绍了JavaScript设计模式之工厂模式,结合完整实例形式分析了工厂模式的概念、原理及javascript定义与使用工厂模式的相关操作技巧,需要的朋友可以参考下
2021-10-10
实例详解JavaScript静态作用域和动态作用域
作用域是指程序源代码中定义变量的区域,作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限,这篇文章主要给大家介绍了关于JavaScript静态作用域和动态作用域的相关资料,需要的朋友可以参考下
2021-10-10
微信小程序实现滚动加载更多的代码
这篇文章通过实例代码给大家介绍了微信小程序实现滚动加载更多，给大家提供了完整代码,需要的朋友可以参考下
2019-12-12
JS的拖拽属性draggable详解
这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
JS实现的类似微信聊天效果示例
这篇文章主要介绍了JS实现的类似微信聊天效果,可实现模拟微信聊天效果的对话框信息传输,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
layui前端框架之table表数据的刷新方法
今天小编就为大家分享一篇layui前端框架之table表数据的刷新方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
JS通过URL下载文件并重命名两种方式代码
前端下载文件方法很多,url是文件地址,下面这篇文章主要给大家介绍了关于JS通过URL下载文件并重命名的两种方式,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-11-11