IOS webview 可编辑div失去焦点后不能插入图片?
混合开发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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
终于解决了,发现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);