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

目录
  • 引言
  • 1、textarea的属性相关介绍
  • 2、使用示例
  • 3、效果
  • 4、Bug & Tip bug:
  • 总结

引言

昨天把系分的项目又加了一点逻辑判断，比如已经下单的菜品不能减少，不能重复下单，应该先下单再支付等…

弄完购物车的逻辑之后，发现一直没有管备注那一块，于是输入了一下试试，结果发现不能换行…就非常丑陋

后来查阅相关资料发现，我用的wxml组件是input，只能单行输入，如果要支持多行输入，应该用textarea。

下面就来介绍一下textarea：

1、textarea的属性相关介绍

属性名 类型 默认值 说明 最低版本
value String   输入框的内容  
placeholder String   输入框为空时占位符  
placeholder-style String   指定 placeholder 的样式  
placeholder-class String textarea-placeholder 指定 placeholder 的样式类  
disabled Boolean false 是否禁用  
maxlength Number 140 最大输入长度，设置为 -1 的时候不限制最大长度  
auto-focus Boolean false 自动聚焦，拉起键盘。  
focus Boolean false 获取焦点  
auto-height Boolean false 是否自动增高，设置auto-height时，style.height不生效  
fixed Boolean false 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true  
cursor-spacing Number 0 指定光标与键盘的距离，单位 px 。取 textarea 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离  
cursor Number   指定focus时的光标位置 1.5.0
show-confirm-bar Boolean true 是否显示键盘上方带有”完成“按钮那一栏 1.6.0
selection-start Number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用 1.9.0
selection-end Number -1 光标结束位置，自动聚集时有效，需与selection-start搭配使用 1.9.0
adjust-position Boolean true 键盘弹起时，是否自动上推页面 1.9.90
bindfocus EventHandle   输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度，在基础库 1.9.90 起支持  
bindblur EventHandle   输入框失去焦点时触发，event.detail = {value, cursor}  
bindlinechange EventHandle   输入框行数变化时调用，event.detail = {height: 0, heightRpx: 0, lineCount: 0}  
bindinput EventHandle   当键盘输入时，触发 input 事件，event.detail = {value, cursor}， bindinput 处理函数的返回值并不会反映到 textarea 上  
bindconfirm EventHandle   点击完成时， 触发 confirm 事件，event.detail = {value: value}

2、使用示例

下面给出我们的 的示例，备注输入框的值与details绑定，当失去焦点（默认为输入完成）时将textarea的输入框内的值赋值给details，而执行完某些业务（提交订单or支付订单）时设置details为空字符串。

//wxml
<textarea class="detailText"
    placeholder="输入您的备注"
    bindblur="bindTextAreaBlur"
    value="{{details}}">
</textarea>

//js
bindTextAreaBlur: function(e) {
    console.log(e.detail.value);
    var that = this;
    that.setData({
      details: e.detail.value
    });
  },

...

//提交订单或支付订单时清空备注
var that = this;
that.setData({
              details: '',
            })

由于备注部分在页面上只占一部分位置，因此设置其css样式为固定高度，而不是设其属性auto-height。

3、效果

支持多行输入，超过给定高度出现滚动条

获取输入框内的文字

4、Bug & Tip bug:

  1. bug: 微信版本 6.3.30，textarea 在列表渲染时，新增加的 textarea 在自动聚焦时的位置计算错误。
  2. tip: textarea 的 blur 事件会晚于页面上的 tap 事件，如果需要在 button 的点击事件获取 textarea，可以使用 form 的 bindsubmit。
  3. tip: 不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
  4. tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。
  5. tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。
  6. tip: css 动画对 textarea 组件无效。

更多资料请查看官网文档。

总结

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

赞 (0)

相关推荐

  • 微信小程序在text文本实现多种字体样式

    微信小程序在text文本实现多种字体样式

    这篇文章主要介绍了微信小程序在text文本实现多种字体样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 微信小程序比较特别,它的wxml只允许用自己家的标签,像那些span.div什么的统统不可以用,那如何在text文本加入不同的样式呢,在html里面我们可以添加一个span,再给那些span添加不同的class或者style就可以了,但小程序不可以,在text里面只允许在加入text,不可以加view等东西,所以我们可以按照它提供的,再加一

  • 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view

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

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

    目录 引言 1.textarea的属性相关介绍 2.使用示例 3.效果 4.Bug & Tip bug: 总结 引言 昨天把系分的项目又加了一点逻辑判断,比如已经下单的菜品不能减少,不能重复下单,应该先下单再支付等… 弄完购物车的逻辑之后,发现一直没有管备注那一块,于是输入了一下试试,结果发现不能换行…就非常丑陋 后来查阅相关资料发现,我用的wxml组件是input,只能单行输入,如果要支持多行输入,应该用textarea. 下面就来介绍一下textarea: 1.textarea的属性相关介绍

  • 微信小程序实现短信登录的实战

    微信小程序实现短信登录的实战

    目录 1.界面效果预览 2.uView安装 3.uView配置 3.1 main.js中引入 3.2 uni.scss中引入 3.3 App.vue中引入 3.4 pages.json中配置 4.短信登录界面 5.点击获取验证码接口 项目要求增加短信登录及人脸识别登录功能,下面我们来实现下短信登录功能 1.界面效果预览 2.uView安装 uView官网:https://www.uviewui.com 以npm安装为例,执行:npm install uview-ui即可 3.uView配置 3.

  • 微信小程序npm引入vant-weapp的踩坑记录

    微信小程序npm引入vant-weapp的踩坑记录

    微信小程序项目使用npm安装vant-weapp的正确步骤 使用npm安装vant-weapp 到项目根目录下: npm i vant-weapp -S --production 然后再详情中选中使用npm模块,然后点击工具栏中的构建npm.本以为这样就可以安装成功了,结果 没有找到npm包 这让我纠结了一个早上.看了文档,琢磨了很久,最后研究出问题的关键. 第一步:使用cmd进入项目根目录:npm init 然后一直按回车 第二步:输入你要安装的文件(npm i vant-weapp -S -

  • 微信小程序组件生命周期的踩坑记录

    微信小程序组件生命周期的踩坑记录

    组件生命周期,通常是我们业务逻辑开始的地方. 如果业务场景比较复杂,组件生命周期有不符合预期的表现时, 可能会导致一些诡异的业务bug,它们极难复现和修复. 组件 attached 生命周期执行次数 按照通常的理解,除moved/show/hide等生命周期可能多次执行外, 严格意义上与组件加载相关的生命周期,如:created.attached.ready等,每个组件实例应该只执行一次.但是事实真的如此吗? 背景 这个问题的发现,源于我们在小程序的报错日志中, 收到大量类似Cannot red

  • 微信小程序自定义tabBar的踩坑实践记录

    微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index

  • 微信小程序调用支付接口的完整流程记录

    目录 当然在开发之前,我们需要有下面这些东西: 步骤如下: 总结 官方的文档路径------>文档路径:developers.weixin.qq.com/miniprogram… 当然在开发之前,我们需要有下面这些东西: appId(小程序分配) 小程序密钥(小程序配置界面获取) 商户号 api密钥(商家后台自己设置) 首先我们要知道把大象放进冰箱拢共需要三步(不是),那么我们调起支付也是一样的 步骤如下: wx.login获取用户临时登录凭证code,发送到后端服务器换取openId 在下单时

  • Python爬取微信小程序Charles实现过程图解

    一.前言 最近需要获取微信小程序上的数据进行分析处理,第一时间想到的方式就是采用python爬虫爬取数据,尝试后发现诸多问题,比如无法获取目标网址.解析网址中存在指定参数的不确定性.加密问题等等,经过一番尝试,终于使用 Charles 抓取到指定微信小程序中的数据,本文进行记录并总结. 环境配置: 电脑:Windows10,连接有线网 手机:iPhone Xr,连接无线网 注:有线网与无线网最好位于同一网段下. 本文有线网网址:192.168.131.24,无线网网址:192.168.210.2

  • 微信小程序 input输入及动态设置按钮的实现

    微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"

  • 微信小程序-获得用户输入内容

    微信小程序-获得用户输入内容

    在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content").val() 在微信小程序中并不能这样写. 可以通过组件的属性 bindchange 将用户输入的储存存起来 test.wxml <input id="postalCode" bindchange="bindChange" type="number

  • 微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

    微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】

    本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"> <view style="display:flex;"> <label>用户名:</label> <input

随机推荐