小程序获得光标所在高度 小程序获得光标所在高度怎么设置

在开发微信小程序时，有时需要获取用户输入光标所在的位置，以便进行一些特定的操作，比如在文本编辑器中插入图片、表情或其他元素，在微信小程序中，可以通过监听键盘事件和使用一些API来实现这个功能。

以下是实现获取光标位置高度的步骤：

1、设置页面布局：

你需要有一个输入框（<input> 或 <textarea>）供用户输入文本。

2、绑定键盘事件：

在输入框组件上绑定onKeyboardHeightChange事件，这个事件会在键盘高度发生变化时触发。

3、获取键盘高度：

当键盘弹出或收起时，onKeyboardHeightChange事件会传递一个参数，其中包含了键盘的高度。

4、计算光标位置：

光标的位置通常是指文本输入框中的文本光标所在的位置，在小程序中，可以通过selection-change事件来监听光标位置的变化。

5、使用createSelectorQuery获取光标高度：

使用createSelectorQuery来获取输入框的位置和尺寸，然后结合光标的位置计算出光标的垂直高度。

下面是一个简单的示例代码：

Page({
  data: {
    keyboardHeight: 0
  },
  
  onKeyboardHeightChange: function(e) {
    this.setData({
      keyboardHeight: e.detail.height
    });
  },
  
  onInput: function(e) {
    // 这里可以处理用户的输入，如果需要的话
  },
  
  onSelectionChange: function(e) {
    const query = wx.createSelectorQuery();
    query.select('#yourInputId').boundingClientRect();
    query.exec((res) => {
      if (res[0]) {
        const { height, top } = res[0];
        const cursorHeight = top + height - this.data.keyboardHeight;
        // cursorHeight 就是光标相对于页面顶部的位置
        console.log('光标位置高度:', cursorHeight);
      }
    });
  },
  
  onLoad: function() {
    const that = this;
    wx.onKeyboardHeightChange(function(e) {
      that.onKeyboardHeightChange(e);
    });
  }
});

在页面的WXML文件中，你需要为输入框设置id，并绑定相应的事件：

<input id="yourInputId" type="text" bindinput="onInput" bindselectionchange="onSelectionChange"/>

注意：

- 上述代码中的onSelectionChange方法会在光标位置变化时被调用，但并不是所有情况下都会触发，比如在某些输入法下可能不会触发。

- createSelectorQuery方法需要在页面的方法中调用，不能在组件的方法中调用。

- keyboardHeight变量用于存储键盘的高度，以便在计算光标位置时使用。

这个示例提供了一个基本的框架，你可以根据实际的需求进行调整和扩展，你可能需要添加更多的逻辑来处理光标位置的获取，或者在光标位置变化时执行特定的操作。