一招搞定小程序textarea样式兼容

解决小程序中textarea ios端样式不兼容的终极指南

什么是 textarea 组件？

在小程序开发中，textarea 组件是一个多行文本输入框，允许用户输入大量文本内容。然而，在 iOS 系统中，textarea 的样式与安卓系统有所不同，可能导致页面布局出现问题。

问题

当 textarea 与标题对齐时，这个问题在 iOS 系统中尤为明显。在 iOS 11 及更高版本中，textarea 存在内边距，这会破坏对齐效果。在 iOS 10 及以下版本中，内边距略有不同，也会导致布局问题。

解决方案

要解决此问题，我们需要：

1. 判断手机型号： 使用 JavaScript 代码检查用户正在使用的设备是否为 iOS 设备。

2. 编写不同的代码： 根据手机型号，编写不同的代码来处理 textarea 的样式。对于 iOS 11 及更高版本，我们需要删除内边距，而对于 iOS 10 及以下版本，我们需要设置不同的内边距。

代码示例

判断手机型号

const isIOS = () => {
  return /iphone|ipad|ipod/.test(navigator.userAgent.toLowerCase());
};

iOS系统

if (isIOS()) {
  wx.getSystemInfo({
    success: (res) => {
      const version = res.system.replace(/[^0-9]/g, '');
      if (version >= 11) {
        // ios11及以上版本
        wx.createSelectorQuery().select('.textarea').style('padding', '0').exec();
      } else {
        // ios10及以下版本
        wx.createSelectorQuery().select('.textarea').style('padding', '6px 0').exec();
      }
    },
  });
}

安卓系统

if (!isIOS()) {
  wx.createSelectorQuery().select('.textarea').style('padding', '0').exec();
}

效果预览

使用上述代码，我们可以在 iOS 和安卓系统中实现 textarea 与标题的正确对齐，无论 iOS 版本如何。

常见问题解答

• 为什么在 iOS 11 及更高版本中需要删除 textarea 的内边距？
  因为 iOS 11 及更高版本中的 textarea 默认具有内边距，这会干扰与标题的对齐。

• 为什么在 iOS 10 及以下版本中需要设置不同的内边距？
  因为 iOS 10 及以下版本中的 textarea 默认内边距较小，我们需要将其稍微增加以实现正确的对齐。

• 这个解决方案是否适用于所有 iOS 设备？
  是的，该解决方案适用于所有 iOS 设备，无论其版本或型号如何。

• 这个解决方案是否会影响 textarea 的其他功能？
  否，该解决方案只修改了 textarea 的样式，不会影响其其他功能，如输入和滚动。

• 如何将该解决方案应用于我的小程序？
  在小程序的 WXML 文件中添加 textarea 组件，并在 WXS 文件中添加代码来判断手机型号和设置相应的样式。