Контентабельные списки HTML: первый элемент списка ведет себя странно? - PullRequest
Новая
       30

Контентабельные списки HTML: первый элемент списка ведет себя странно?

1 голос
/ 22 марта 2012

Итак, я пытаюсь создать довольно простой список с контентом, который выглядит следующим образом: 

<article contenteditable="true">

<p>Text in doc</p>
<ol>
<li><p>Text in first LI</p><p>Has another para</p>
    <ol>
        <li><p>Text in nested LI</p></li>
        <li><p>Text in nested LI2</p><p>And then some</p></li>
    </ol>
</li>
<li><p>Text in second LI</p></li>
</ol>

</article>

В браузерах на основе Webkit, если у вас есть игра с ним, вы обнаружите, что он работает довольно разумно, вставляя абзацы при нажатии клавиши ввода, удаляя элементы списка, если вы нажимаете клавишу Backspace, и тому подобное.

Однако, если вы попытаетесь удалить первый элемент в списке (хотя в списке есть и другие элементы), все станет странно. Вы в значительной степени не можете сделать это. На самом деле он перемещает текст в предыдущий абзац и оставляет пустой элемент списка, к которому вы больше не можете добраться.

Может быть, это дефект Webkit, но Firefox работает так же ... В любом случае, кто-нибудь может предложить обходной путь? Я думал, если бы у меня был какой-то javascript, который обнаружил бы, если бы это был первый символ в списке, то это, по крайней мере, остановило бы некоторые из не интуитивного поведения, но вы все равно можете выделить элемент и нажать del и по-прежнему иметь недоступный 1.

Я также пытался сделать из них div и использовать хром для переднего края, то же поведение.

См. http://jsfiddle.net/2Unmz/14/, хотя там он действует иначе, чем в моем браузере напрямую.

1 Ответ

1 голос
/ 25 марта 2012

Несмотря на то, что это рекомендуемый метод вложения списков (http://developer.mozilla.org/en/HTML/Element/ol),, кажется, что вы должны завершить элемент списка перед встраиванием в него другого списка. Этот HTML работает гораздо больше, чем я ожидал: 

<p>Text in doc</p>
<ol>
<li><p>Text in first LI</p><p>Has another para</p></li><!-- Ending the LI now -->
    <ol>
        <li><p>Text in nested LI</p></li>
        <li><p>Text in nested LI2</p><p>And then some</p></li>
    </ol>
<!-- This is where it used to be -->
<li><p>Text in second LI</p></li>
</ol>

</article>

Похоже, что делать вложенные списки не очень хорошая идея, как подсказывает mozilla.org, если вы хотите, чтобы contentEditable делал логичные вещи с вашим документом.

...