在Canvas-Editor中实现控件只读属性的技术方案

背景介绍

Canvas-Editor是一款功能强大的富文本编辑器，支持多种控件和交互方式。在移动端开发场景中，开发者经常需要处理控件与虚拟键盘的交互问题。当控件仅用于展示或需要通过自定义选择器设置值时，避免系统键盘自动弹出成为一个重要需求。

问题分析

移动端浏览器在用户点击输入区域时会自动弹出虚拟键盘，这在某些业务场景下并不符合需求。例如：

• 控件值需要通过自定义选择器设置
• 仅用于展示不可编辑的内容
• 需要通过API而非用户直接输入来更新值

传统的disabled属性虽然可以阻止键盘弹出，但同时会禁用所有交互，无法满足需要通过JavaScript设置值的场景。

解决方案

核心思路

通过为控件添加readonly属性，实现以下目标：

1. 阻止系统键盘自动弹出
2. 保持控件可被JavaScript操作
3. 支持通过API更新值

实现细节

1. 控件只读状态判断： 在Control类中新增getIsReadOnlyControl方法，通过检查控件的readonly属性值确定当前是否处于只读状态。

2. 光标代理元素处理： 在CanvasEvent的点击事件中，根据控件只读状态动态设置代理DOM元素的readOnly属性，从而控制系统键盘行为。

3. 特殊场景处理：

   • 设计模式下保持可编辑
   • 后缀组件保持可编辑
   • iOS系统特殊处理

代码实现要点

// 判断控件是否只读
public getIsReadOnlyControl(context: IControlContext = {}): boolean {
  if (this.draw.isDesignMode() || !this.activeControl) return false
  const {startIndex, endIndex} = context.range || this.range.getRange()
  if (startIndex === endIndex && ~startIndex && ~endIndex) {
    const elementList = context.elementList || this.getElementList()
    const startElement = elementList[startIndex]
    if (startElement.controlComponent === ControlComponent.POSTFIX) {
      return false
    }
  }
  return !!this.activeControl.getElement()?.control?.readonly
}

// 点击事件处理
public click() {
  this.draw.getCursor().getAgentDom().readOnly = false
  if (this.getDraw().getControl().getIsReadOnlyControl() && !this.draw.isReadonly()) {
    this.draw.getCursor().getAgentDom().readOnly = true
  } else if (isIOS && !this.draw.isReadonly()) {
    this.draw.getCursor().getAgentDom().focus()
  }
}

应用场景

1. 移动端日期选择器： 点击日期控件时不弹出键盘，而是显示自定义日期选择组件。

2. 下拉选择控件： 显示自定义下拉菜单而非系统键盘。

3. 只读展示控件： 展示不可编辑但可通过API更新的内容。

优势与局限

优势：

• 灵活控制键盘行为
• 保持JavaScript可操作性
• 良好的移动端兼容性

局限：

• iOS系统可能需要额外处理
• 需要开发者明确设置readonly属性

最佳实践建议

1. 在需要自定义输入方式的控件上设置readonly属性
2. 配合自定义事件处理实现完整交互流程
3. 针对iOS设备进行充分测试
4. 考虑添加视觉提示表明控件可交互但不可直接输入

这种实现方式为Canvas-Editor在移动端的控件交互提供了更大的灵活性，使开发者能够创建更符合移动端使用习惯的编辑体验。