uni-app nvue 下 安卓 cursor-color 属性不生效

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

uni-app nvue 下 安卓 cursor-color 属性不生效

示例代码：

<textarea class="commentinput" adjust-position="false" :cursor-color="cursor_color" placeholder="有什么想说的就说吧"  
    confirm-hold="true" focus="true" @focus="getkeyboardheight" @keyboardheightchange="keyboardheightchange"  
    :style="{width: bwidth - 22 + 'px'}"></textarea>  

data() {  
    return {  
        cursor_color: "#BA0000",
    }
}

操作步骤：

放一个input 或者textarea控件 设置cursor-color属性即可

预期结果：

光标颜色变化

实际结果：

没有任何变化

bug描述：

按文档说明改变光标颜色，但不生效 input textarea都不生效


| 项目信息           | 详情                   |
|------------------|----------------------|
| 产品分类         | uniapp/App              |
| PC开发环境操作系统 | Windows                  |
| PC开发环境操作系统版本号 | 旗舰版                    |
| HBuilderX类型     | 正式                      |
| HBuilderX版本号   | 4.23                      |
| 手机系统          | Android                   |
| 手机系统版本号    | Android 14                |
| 手机厂商          | 华为                       |
| 手机机型          | mate60                     |
| 页面类型          | nvue                       |
| vue版本          | vue2                       |
| 打包方式          | 云端                       |
| 项目创建方式      | HBuilderX                  |

Harmonyos Next教程
5 回复

你好， nvue 不支持 cursor-color。 相关文档


要改光标咋整 给提供个思路呀

回复 1***@qq.com: nvue不会维护了，建议用vue

唉，nvue已经没人管了

在 uni-app 中使用 nvue 开发时，确实可能会遇到 cursor-color 属性在安卓设备上不起作用的问题。这主要是因为 nvue 是基于 Weex 引擎的，其渲染机制和原生 HTML/CSS 有所不同，特别是在处理一些样式属性时。

要解决这个问题，你可以考虑使用原生的方法或者通过其他方式模拟光标颜色的改变。以下是一个使用原生 Android 代码的示例，通过 JavaScript 调用原生方法来改变光标颜色。注意，这需要使用 uni-app 的插件机制或者自定义组件来与原生代码进行交互。

步骤一：创建原生插件（以安卓为例）

  1. 在 native-plugins 目录下创建插件目录和文件
mkdir -p native-plugins/MyCursorColorPlugin/android/src/main/java/com/yourcompany/plugins
cd native-plugins/MyCursorColorPlugin/android/src/main/java/com/yourcompany/plugins
  1. 创建插件类
package com.yourcompany.plugins;

import android.graphics.drawable.ColorDrawable;
import android.text.Editable;
import android.text.Selection;
import android.text.Spannable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

import com.alibaba.fastjson.JSONObject;
import com.taobao.weex.annotation.JSMethod;
import com.taobao.weex.bridge.JSCallback;
import com.taobao.weex.common.WXModule;

public class MyCursorColorPlugin extends WXModule {

    @JSMethod(uiThread = true)
    public void setCursorColor(String color, final JSCallback callback) {
        // 获取当前页面的根视图
        View rootView = mWXSDKInstance.getRootView();
        // 遍历所有子视图，找到 EditText 并设置光标颜色
        traverseViews(rootView, color, callback);
    }

    private void traverseViews(View view, String color, JSCallback callback) {
        if (view instanceof EditText) {
            EditText editText = (EditText) view;
            editText.setTextCursorDrawable(new ColorDrawable(android.graphics.Color.parseColor(color)));
        } else if (view instanceof ViewGroup) {
            ViewGroup viewGroup = (ViewGroup) view;
            for (int i = 0; i < viewGroup.getChildCount(); i++) {
                traverseViews(viewGroup.getChildAt(i), color, callback);
            }
        }
    }
}

步骤二：在 manifest.json 中注册插件

"nativePlugins": {
    "MyCursorColorPlugin": {
        "package": "com.yourcompany.plugins.MyCursorColorPlugin",
        "platforms": {
            "android": {}
        }
    }
}

步骤三：在 nvue 页面中使用插件

<template>
  <div>
    <input type="text" placeholder="Type something" />
  </div>
</template>

<script>
export default {
  onLoad() {
    this.$uniCloudCall('MyCursorColorPlugin.setCursorColor', { color: '#FF0000' }, (res) => {
      console.log('Cursor color set:', res);
    });
  }
}
</script>

注意：这里的 $uniCloudCall 只是一个示意，实际调用原生插件的方法可能需要根据 uni-app 的文档进行调整。上述代码展示了如何通过原生插件来改变光标颜色，从而绕过 nvue 中 cursor-color 属性不生效的问题。

回到顶部