微信小程序textarea组件的使用

2024-11-21 22:26:26

1、打开开发者工具在项目的pages下,新建mypage文件夹,在mypage文件夹内新建page,名为mypage,并在app.json配置文件中将mypage设为第一页面

微信小程序textarea组件的使用

2、在mypage.wxml中写代码如下,添加一个textarea组件<view class='container'><textarea > </textarea></view>在mypage.wxss中为textarea添加bordertextarea{border: 3rpx solid rebeccapurple;}

微信小程序textarea组件的使用

3、保存代码,左侧模拟器出现文本输入区域,默认textarea最多只能输入140字符,不论中英文

微信小程序textarea组件的使用

4、为textarea添加事件,统计输入的字符数,修改mypage.wxml代码如下:<view class='container'><textarea bindinput='textinput' > <text class='botsum'>您已输入{{info}}字符</text></textarea></view>

微信小程序textarea组件的使用

5、在mypage.wxss添加样式如下:textarea{height:160rpx;border: 3rpx solid rebeccapurple;position: relative;}.botsum{position: absolute;top: 130rpx;font-size: 25rpx;}

微信小程序textarea组件的使用

6、在mypage.js文件,绑定textarea的bindinput事件方法,代码如下:textinput:function(e){ var content = e.detail.value; var cnt = parseInt(content.length); this.setData({ info:cnt })}

微信小程序textarea组件的使用

7、编译运行代码,在模拟器的textarea输入内容,会在下方实时显示字符数

微信小程序textarea组件的使用
猜你喜欢