微信小程序输入多行文本的实战记录
作者:Arururururu 发布时间:2023-09-10 15:29:51
引言
昨天把系分的项目又加了一点逻辑判断,比如已经下单的菜品不能减少,不能重复下单,应该先下单再支付等…
弄完购物车的逻辑之后,发现一直没有管备注那一块,于是输入了一下试试,结果发现不能换行…就非常丑陋
后来查阅相关资料发现,我用的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:
bug: 微信版本 6.3.30,textarea 在列表渲染时,新增加的 textarea 在自动聚焦时的位置计算错误。
tip: textarea 的 blur 事件会晚于页面上的 tap 事件,如果需要在 button 的点击事件获取 textarea,可以使用 form 的 bindsubmit。
tip: 不建议在多行文本上对用户的输入进行修改,所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
tip: textarea 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
tip: 请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件。
tip: css 动画对 textarea 组件无效。
更多资料请查看官网文档。
来源:https://blog.csdn.net/unirrrrr/article/details/80723408
猜你喜欢
- 阅读《YUI学习笔记(1)》《YUI学习笔记(2)》YAHOO.lang.later,YAHOO.lang.trim,YAHOO.lang.
- Python爬虫、数据分析、网站开发等案例教程视频免费在线观看https://space.bilibili.com/523606542Sel
- 在CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的
- <div class=”A” style=”position:relative;”>A 
- <html><head>//搜索暂时没做,数据是出来了,但是却没法显示<link rel="styl
- 在程序调试中,有时候需要知道有多少Session变量在使用,她们的值如何?由于Session对象提供一个称为Contents的集合(Coll
- 一.脚本基础1.USE语句设置当前数据库。2.声明变量语法:DECLARE @变量名 变量类型在声明变量后,给变量赋值之前,变量的值为NUL
- 文件名字处理文件名字得看业务要求。不需要保留原始名字,则随机生成名字,拼接上白名单校验过的后缀即可。反之要谨慎处理://允许上传的后缀白名单
- 对大家推荐很好使用的MySql节点系统,像让大家对MySql节点系统有所了解,然后对MySql节点系统全面讲解介绍,希望对大家有用在向大家详
- Dreamweaver一直是不少网友钟情的网页设计工具,除了它强大的动态效果制作能力外,方便简洁的操作界面更是独具特色,下面我们将以最新版本
- Example.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
- 阅读上一章:Chapter 7 锚点 Chapter 8 再谈清单先前在第一章,我们讨论过几种标记清单的做法,研究以<ul>和&
- 本文实例讲述了php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法。分享给大家供大家参考,具体如下:微信支付a
- 一、功能简述正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。我
- 零、本讲学习目标了解面向对象编程思想掌握类和对象的定义和使用了解Python中的对象一、面向对象(一)程序员“面向对象”在现实世界中存在各种
- 1.文档对象模型(DOM)DOM是HTML和XML文档的编程基础,它定义了处理执行文档的途径。编程者可以使用DOM增加文档、定位文档结构、填
- 滚动图片可以说是做网站经常会遇到的,特别是做企业网站,最常用的像产品展示,图片展示等,滚动的好处是吸引眼球,让人一下就注意到。之前本站发了一
- 以前我就是一篇博文 就给出一个好用的函数,它在我几篇博文中被广泛运用的。最近看了不少东西,于是便有了这篇博文,以梳理我学到的新东西。毫无疑问
- javascript作为一个动态语言,动态解析脚本的方法非常多,如万恶又万能的eval,低调的Function,IE独占的execScrip
- 在ASP中,为什么有时候刷新页面后,重新执行ASP代码时就连不上数据库了?这种情况一般发生在动态IP分配中,由于ASP连接数据库是定时的,默