支付宝小程序textarea字数统计踩坑
前情uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验也挺棒的，公司项目就是发布多端的项目，所以主推的是uni-app，同时uview-plus是uni-app比较有名的UI库，为高效开发我在公司项目我也引入了它
textarea是多行输入框表单组件，最近在做公司项目地址管理的时候，详细地址这一块是需要用户填写的，考虑到字数和方便交互，此处选用的就是多行输入框textarea，同时产品的要求控制字数在99个内，同时需要显示字数统计，uview-plus有封装up-textarea组件，所以此处使用的就是它
坑位
在显示统计字数的时候因为公司产品的强定制，重写了uview-plus封装的表单组件的一些样式，像背景色，字体颜色和边框什么的，但是在支付宝小程序端我想修改up-textarea统计字数颜色的时候发现我无能为力了，于是开始逛支付宝小程序社区和网上找寻答案，也问了AI，都没有找到可行的解决方法，最后直接找了支付小程序客服寻找技术支持，也没有解决
Why?
我发现在支付宝小程序上字数统计是textarea原生渲染的，而官方没有提供可调整的配置
解决方案
我看了view-plus的up-textarea源码，作者确实考虑到了支付宝小程序自有字数统计的功能，就对支付宝做了特别处理，但是作者应该是没有考虑到支付宝并没有提示修改它样式的API，组件关键源码如下：
<template>
<view: :>
<textarea
:value="innerValue"
:
:placeholder="placeholder"
:placeholder-
:placeholder-
:disabled="disabled"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
:cursorSpacing="cursorSpacing"
:cursor="cursor"
:showConfirmBar="showConfirmBar"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:disableDefaultPadding="disableDefaultPadding"
:holdKeyboard="holdKeyboard"
:maxlength="maxlength"
:confirm-type="confirmType"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="onFocus"
@blur="onBlur"
@linechange="onLinechange"
@input="onInput"
@confirm="onConfirm"
@keyboardheightchange="onKeyboardheightchange"
:showCount="count"
></textarea>
<text
:
v-if="count"
>{{ innerValue.length }}/{{ maxlength }}</text
>
</view>
</template>既然支付宝自带无法显示，为什么我们不直接干掉支付宝自带，直接使用uview-plus自带的了，说干就干，修改up-textarea组件源码，关键代码如下：
<template>
<view: :>
<textarea
:value="innerValue"
:
:placeholder="placeholder"
:placeholder-
:placeholder-
:disabled="disabled"
:focus="focus"
:autoHeight="autoHeight"
:fixed="fixed"
:cursorSpacing="cursorSpacing"
:cursor="cursor"
:showConfirmBar="showConfirmBar"
:selectionStart="selectionStart"
:selectionEnd="selectionEnd"
:adjustPosition="adjustPosition"
:disableDefaultPadding="disableDefaultPadding"
:holdKeyboard="holdKeyboard"
:maxlength="maxlength"
:confirm-type="confirmType"
:ignoreCompositionEvent="ignoreCompositionEvent"
@focus="onFocus"
@blur="onBlur"
@linechange="onLinechange"
@input="onInput"
@confirm="onConfirm"
@keyboardheightchange="onKeyboardheightchange"
:showCount="false"
></textarea>
<text
:
v-if="count"
>{{ innerValue.length }}/{{ maxlength }}</text
>
</view>
</template>这样就可以通过样式穿透修改字数统计的样式了，又完了一次小踩坑之旅
思考
在做小程序需求的时候，因为你依赖的就是它平台，对于一些你无法解决，小程序社区也找不到解决方案的，那就大胆寻求官方技术支持，如果得到官方确实有这样的限制，无法达到你的需求，你可以思考思考是否有什么方法可以绕过，如果实在不行，那就跟产品大胆说出遇到的困境，争取调整调整需求，其实对于做技术的每天都是踩坑的路上，但我真心希望所有人都一路生花，少踩坑
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]