怎么在微信小程序中使用textarea 多行输入框

代码：

wxml

<view class="content">

placeholder：

<textarea placeholder="占位符" />

<textarea placeholder="占位符 改变样式style" placeholder-style=

"color:blue"/>

<textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/>

</view>

复制代码

wxss

.content{

border:1px black solid

margin: 10px

font-size: 10pt

padding: 10px

}

textarea{

border: 1px red solid

margin: auto

width:100%

height: 3em

margin-top:5px

padding: 3px

}

/*占位符样式*/

.placeholdText{

font-size: 2em

}

微信小程序6位支付密码输入框

产品需求

微信小程序支付密码6位输入框

实现效果

非明文6位输入框，模拟光标，输入自动移到下一位，满6位自动设置

实现原理

1.放置一个输入框，隐藏其文字和位置，同时设置支付输入框（表格）样式

2.当点击输入框时设置表格为聚焦状态，唤起键盘，点击空白处，失去焦点，设为失去焦点样式

3.限制输入框最大字数为6并且监听输入框状态，以输入框值的长度作为圆点和光标展示的渲染条件

4.当输入框的值等于6时，设置组件的事件传递到引用的页面，页面自定义事件（发起支付请求等...）

其他说明

6位支付密码是一个很常见的需求。

在H5端用vue做过组件，app端也要求实现，小程序类似的组件在网页上检索到的并不多，仅此记录。

Github地址： https://github.com/evan2020/six-Input-box

微信默认是整行输入的，但是输入框显示的仅仅只是输入框所能承载的范围，因此发送之后本来的排版就会乱掉，需要在每输入一段话之后，点回车键，切换至下一行再输入就可以对齐了。详细步骤如下：

演示设备：一加11，软件版本：微信8.0.31

1、手机桌面找到【微信】APP并点击打开。

2、找到要发送信息的朋友，点击进入。

3、输入要发表的文字，每输入一段话之后，点回车键，切换至下一行再输入。

4、这样子发出去后，就不会乱了，如下图所示。

---