IOS webview 可编辑div失去焦点后不能插入图片?

发布于 2022-09-05 22:06:00 字数 1148 浏览 21 评论 0

混合开发h5页面内需要做一个简易的富文本编辑器,需要有插入图片的功能(图文混排的),现在的问题是,点击插入图片按钮之后,可编辑div就失去焦点从而无法插入图片了,请问这个有什么解决方案?安卓下是可以在光标位置处插入图片的。但是IOS的webview下,点击插入图片的按钮就导致编辑区域失去了焦点。

我尝试在编辑区域失去焦点时记录下光标的位置,在执行插入图片的操作之前再在该位置插入光标。此方法在安卓下同样能生效,但在IOS下依然不生效。
失去焦点时,记录下光标位置:

var selection=window.getSelection();
_SELF.data.pos=selection.focusOffset;
_SELF.el.focusNode=selection.focusNode;

插入图片前,使原来位置插入光标:
setCaretPosition:function(selectorId,pos){

  var el=document.getElementById(selectorId);
  el.focus();
  if($.support.msie){
    var range = document.selection.createRange();
    this.last = range;
    range.moveToElementText(el);
    range.select();
    document.selection.empty(); //取消选中
  }else{
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    // alert(JSON.stringify(_SELF.el.focusNode));
    alert(pos);
    range.setEnd(_SELF.el.focusNode, pos);
    range.setStart(_SELF.el.focusNode, pos);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  }
},

结果发现在安卓下能获得正确的位置,在IOS下每次的位置都是0。且无法正常插入图片。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

dawn曙光 2022-09-12 22:06:00

终于解决了,发现Safari在onblur时是获取不到光标的位置的(chrome可以)。所以改成监听可编辑div的input事件,记录下光标位置。考虑到用户可能想在一段文字中间插入图片,则用户会点击相应的位置,这时候也要记录下光标的位置。在执行插入图片的动作前再把光标位置还原即可。
记录光标位置:(监听可编辑div的input事件和点击事件时)
var selection=window.getSelection();
_SELF.data.lastRange=selection.getRangeAt(0);

恢复光标位置:
$("#editableDiv").focus();//先让可编辑框获焦
var selection=window.getSelection();
selection.removeAllRanges()
selection.addRange(_SELF.data.lastRange);

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文