1. 背景介绍
随着微信小程序越来越流行，开发者在使用小程序的过程中也遇到了许多问题，其中一个比较常见的问题是textarea和input在使用时出现的一些问题，本文就此进行总结。
2. textarea和input的基本使用
2.1 input标签
input标签用于在小程序中创建表单，常常被用于输入框、单选框等表单元素的制作。
input标签的常见属性：
type：用于指定input类型，通常有text、password、number、radio等
placeholder：用于在输入框中显示默认提示语
value：用于指定input的默认值
name：用于指定表单元素的名称
disabled：用于禁用表单元素
<input type="text" placeholder="请输入用户名" value="" name="username" disabled>
2.2 textarea标签
textarea标签同样被用于在小程序中创建表单，不同的是textarea可以用于多行文本的输入。
textarea标签的常见属性：
placeholder：用于在输入框中显示默认提示语
value：用于指定textarea的默认值
name：用于指定表单元素的名称
disabled：用于禁用表单元素
<textarea placeholder="请输入留言" value="" name="message" disabled></textarea>
3. textarea和input常见问题解决方案
3.1 textarea在iOS设备上换行问题
在iOS设备上，输入多行文本时，会出现文字无法自动换行、光标无法移动到下一行的问题。这是因为在iOS设备上，textarea默认的overflow属性为hidden，而不是auto。
解决方案：在textarea的style属性中添加white-space和overflow属性，如下所示：
<textarea style="white-space: pre-wrap; overflow: auto;"></textarea>
3.2 textarea无法自动获得焦点的问题
在一些需要用户输入的页面中，开发者希望进入该页面时自动弹出输入框并自动聚焦，但是在微信小程序中，textarea并不会自动获得焦点。
解决方案：在wxml文件中使用selector和triggerEvent实现自动聚焦效果，如下所示：
<!-- wxml文件中 -->
<view class="comment-wrap" id="comment-wrap"></view>
<import src="../common/wxParse/select.wxml"/>
<template name="selector">
<select name="{{name}}" value="{{value}}" selector="{{selector}}" bindChange="{{bindChange}}">
<option wx:for="{{range}}" wx:key="{{index}}" value="{{item}}" class="option">{{item}}</option>
</select>
</template>
<!-- js文件中 -->
Page({
onReady: function () {
this.selectComponent('#select').showSelector();
},
showSelector: function() {
const query = wx.createSelectorQuery().in(this);
query.select('#comment-wrap').boundingClientRect((res) => {
this.selectComponent('#select').showSelector({
selector: "#comment",
range: ["留言1", "留言2", "留言3"],
bindChange: this.commentChangeHandler,
value: this.data.commentIndex,
marginTop: res.bottom
});
}).exec();
},
});
3.3 input输入框被遮挡的问题
在一些需要底部固定按钮的页面中，由于微信小程序的限制，在input输入框弹出键盘的时候，底部的按钮会被挡住。
解决方案：在wxml文件中使用fixed代替position，如下所示：
<view class="fixed-button-wrap">
<button class="fixed-button">底部固定按钮</button>
</view>
<input type="text" class="input-text" placeholder="请输入" bindfocus="inputFocusHandler">
.fixed-button-wrap {
height: 100rpx;
width: 100%;
position: fixed;
bottom: 0px;
left: 0;
background-color: #fff;
}
.input-text {
height: 80rpx;
border: none;
background-color: #f5f5f5;
font-size: 32rpx;
padding: 0rpx 30rpx;
width: 100%;
box-sizing: border-box;
}
inputFocusHandler: function (event) {
const bottomButtonHeight = 100; // 底部按钮高度，单位rpx
const windowHeight = wx.getSystemInfoSync().windowHeight; // 屏幕高度，单位px
const keyboardHeight = event.detail.height // 弹出键盘高度，单位px
const inputTop = windowHeight - keyboardHeight - event.detail.height; // input框顶部位置，单位px
if (inputTop < 0) {
this.setData({
inputTop: inputTop - bottomButtonHeight
})
} else {
this.setData({
inputTop: inputTop
})
}
},
3.4 textarea和input支持emoji的问题
在微信小程序中，textarea和input不支持输入emoji表情，在输入时会出现乱码，这给用户体验造成了一定的影响。
解决方案：使用js-emoji库和Node.js实现emoji表情的转换，如下所示：
const emoji = require('../../utils/emoji');
Page({
data: {
text: ''
},
handleInput(e) {
let { value } = e.detail;
this.setData({
text: emoji.parse(value)
});
},
});
其中utils/emoji.js内容如下：
const emoji = require('./wxParse/emoji/emoji');
function emojiUtil() { }
emojiUtil.prototype.parseEmojiStr = function (str) {
var ranges = [
'\ud83c[\udf00-\udfff]', // U+1F300 to U+1F3FF
'\ud83d[\udc00-\ude4f]', // U+1F400 to U+1F64F
'\ud83d[\ude80-\udeff]' // U+1F680 to U+1F6FF
];
return str.replace(new RegExp(ranges.join('|'), 'g'), function (match) {
var char = '';
for (var i = 0; i < emoji.emojiList.length; i++) {
if (emoji.emojiList[i].unicode == match) {
char = emoji.emojiList[i].code;
break;
}
}
return char || match;
});
}
emojiUtil.prototype.parseEmoji = function (str) {
return emoji.parse(this.parseEmojiStr(str));
}
emojiUtil.prototype.parse = function (str) {
return this.parseEmoji(str);
}
module.exports = new emojiUtil();
4. 总结
本文总结了微信小程序中textarea和input在使用过程中常见的问题，并给出了相应的解决方案，希望可以对开发者有所帮助。