uni-app ios app中的input和textarea 设置cursor-spacing 无效

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app ios app中的input和textarea 设置cursor-spacing 无效

操作步骤：

  • 使用模板测试input：<<input maxlength="50" placeholder="1112" :cursor-spacing="150" />

预期结果：

  • ios上生效

实际结果：

  • ios上无法设置

bug描述：

  • ios app中的input和textarea 设置cursor-spacing 无效（使用的ios18）， 整体上推的距离是固定的 adjust-position倒是有效，请问一下有什么好的解决方法吗？

| 项目信息          | 详细信息   |
|-------------------|------------|
| 产品分类          | uniapp/App |
| PC开发环境操作系统 | Windows    |
| PC开发环境操作系统版本号 | win10      |
| HBuilderX类型     | 正式       |
| HBuilderX版本号   | 4.32       |
| 手机系统          | iOS        |
| 手机系统版本号     | iOS 18     |
| 手机厂商          | 苹果       |
| 手机机型          | iphone 12  |
| 页面类型          | vue        |
| vue版本           | vue3       |
| 打包方式          | 云端       |
| 项目创建方式      | HBuilderX  |

Harmonyos Next教程
1 回复

在uni-app中开发iOS应用时，遇到input和textarea的cursor-spacing属性无效的问题，可能是由于uni-app框架在iOS平台上的特定实现差异或限制导致的。虽然cursor-spacing属性在Web开发中常用于调整光标与输入框边缘的距离，但在uni-app的iOS应用中，这一属性可能不被直接支持或存在兼容性问题。

为了解决这个问题，我们可以通过CSS和JavaScript结合的方式，尝试自定义光标的显示位置，或者使用一些变通的方法来达到类似的效果。以下是一个可能的解决方案，利用伪元素和JavaScript动态调整光标位置：

<template>
  <view class="container">
    <textarea id="customTextarea" @focus="handleFocus" @blur="handleBlur"></textarea>
    <view class="custom-cursor" ref="cursor" :style="{ left: cursorPosition + 'px' }"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cursorPosition: 0,
      isFocused: false,
    };
  },
  methods: {
    handleFocus(event) {
      this.isFocused = true;
      this.updateCursorPosition(event.target);
      document.addEventListener('selectionchange', this.updateCursorPosition);
    },
    handleBlur() {
      this.isFocused = false;
      document.removeEventListener('selectionchange', this.updateCursorPosition);
    },
    updateCursorPosition(target) {
      if (!this.isFocused) return;
      const range = window.getSelection().getRangeAt(0);
      const rect = range.getClientRects()[0];
      this.cursorPosition = rect ? rect.left - target.offsetLeft : 0;
    },
  },
};
</script>

<style>
.container {
  position: relative;
}
textarea {
  width: 100%;
  height: 100px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.custom-cursor {
  position: absolute;
  display: inline-block;
  width: 2px; /* 光标宽度 */
  height: 1em; /* 光标高度，可根据需要调整 */
  background-color: black; /* 光标颜色 */
  pointer-events: none; /* 确保光标不影响点击事件 */
  visibility: hidden; /* 初始隐藏，待focus时显示 */
}
textarea:focus + .custom-cursor {
  visibility: visible;
}
</style>

上述代码通过监听textarea的focus和blur事件，以及selectionchange事件，动态计算并更新自定义光标的位置。这种方法虽然复杂一些，但能够在一定程度上模拟cursor-spacing的效果，尤其是在cursor-spacing属性无效的情况下。注意，这种方法可能需要根据具体的应用场景进行调整和优化。

回到顶部