Question

考虑到你有一些具有一些内容的可疑区域：

<div contenteditable="true">
    <p>first paragraph</p>
    <p>
        <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
        <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
    </p>
    <p>second paragraph</p>
</div>

如果您通过左/右箭头键开始导航，则插入符号开始遍历所有子元素。请看这个gif animation

问题是如何让插入符号忽略子元素？或者换句话说：如何将两个图像的内部行为作为单个图像？ jsfiddle

Answer 1

尝试将包含两张图片的<p>更改为<div>，同时关闭内容编辑功能。

<div contenteditable="false">
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'>
</div>

演示 - http://jsfiddle.net/tfdMt/

如何使两个或多个html元素在可编辑区域中表现为单个单元

1 个答案: