feat: typing on ios devices #286

src/editor/assets/css/index.css

@@ -27,6 +27,7 @@
   overflow: hidden;
   color: transparent;
   user-select: none;
+  caret-color: transparent;
   background-color: transparent;
 }
 

src/editor/core/event/CanvasEvent.ts

@@ -18,6 +18,7 @@ import { drop } from './handlers/drop'
 import click from './handlers/click'
 import composition from './handlers/composition'
 import drag from './handlers/drag'
+import { isIOS } from '../../utils/ua'
 
 export interface ICompositionInfo {
   elementList: IElement[]
@@ -67,6 +68,7 @@ export class CanvasEvent {
   }
 
   public register() {
+    this.pageContainer.addEventListener('click', this.click.bind(this))
     this.pageContainer.addEventListener('mousedown', this.mousedown.bind(this))
     this.pageContainer.addEventListener('mouseup', this.mouseup.bind(this))
     this.pageContainer.addEventListener(
@@ -137,6 +139,13 @@ export class CanvasEvent {
     mousedown(evt, this)
   }
 
+  public click() {
+    // IOS系统限制非用户主动触发事件的键盘弹出
+    if (isIOS) {
+      this.draw.getCursor().getAgentDom().focus()
+    }
+  }
+
   public mouseup(evt: MouseEvent) {
     mouseup(evt, this)
   }

src/editor/utils/ua.ts

@@ -1,2 +1,5 @@
 export const isApple =
   typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent)
+
+export const isIOS =
+  typeof navigator !== 'undefined' && /iPad|iPhone/.test(navigator.userAgent)