Нумерация строк и копирование / вставка (HTML / CSS) - PullRequest
Новая
       48

Нумерация строк и копирование / вставка (HTML / CSS)

4 голосов
/ 21 января 2009

Какой прием JS / CSS можно использовать для предотвращения копирования и вставки чисел в упорядоченном списке? 

<OL>
<LI>A
<LI>B
<LI>C
</OL>

  1. A
  2. B
  3. C

Если это невозможно, какие альтернативы доступны?

спасибо

Ответы [ 11 ]

7 голосов
/ 29 января 2009

Копирование номеров OL - это поведение браузера. Я считаю, что некоторые браузеры этого не делают, но большинство делают.

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

По сути, для этого можно было бы переписать код в Javascript так, чтобы он был 2 столбцами, 1 с нумерацией и 1 с содержимым. Вы можете сделать это с помощью грид-системы, такой как YUI Grids или Blueprint . Пользователь сможет выбрать второй столбец с содержимым в нем, не выбирая первый.

Проблема в том, что это разрушает семантическую разметку для пользователей программ чтения с экрана, и они больше не получают преимущества от упорядоченного списка. Может быть возможно сделать это самостоятельно, чтобы только когда пользователь пытается выделить текст, который вы переписываете. Не то чтобы я проверил эту идею.

Отказ от ответственности: я работаю на Yahoo!

4 голосов
/ 30 января 2009

Вы не можете реально контролировать поведение буфера обмена браузера / ОС. Вы можете предоставить ссылку «Копировать» и использовать jquery и плагин jquery.copy . 

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="jquery.copy.js" type="text/javascript"></script>
</head>
<body>
<a href="#" onclick="$.copy($('#theList').find('li').text())">Copy</a>
<OL id="theList">
<LI>A
<LI>B
<LI>C
</OL>
</body>
</html>

Отказ от ответственности: Приведенный выше образец может не функционировать на 100%. ; -)

3 голосов
/ 21 января 2009

Я думаю, это зависит от браузера. Я пытался с IE 7, Firefox 3 и Chrome, и ни один из них не копирует числа (кажется, что Chrome копирует их в выделение, но после вставки их там нет).

2 голосов
/ 31 января 2009

Как насчет использования таблицы, как в http://bugzilla.gnome.org/attachment.cgi?id=127131

2 голосов
/ 30 января 2009

Вы можете использовать изображения для отображения чисел, и тогда они не будут скопированы. CSS можно использовать для смещения чисел и текста, чтобы он выглядел как обычный список.

CSS: 

OL>li {  list-style-type: none; padding-left: 10px }
OL>li .one { background-image: url('images/one.png') no-repeat left }
OL>li .two { background-image: url('images/two.png') no-repeat left }

Итак, после этого вам просто нужно выяснить, куда поместить изображение.

2 голосов
/ 21 января 2009

Для меня я получаю либо цифры (firefox 3), либо символ «#» (firefox 2), даже если они не выбраны. на ie6 я просто получаю выбор.

0 голосов
/ 30 августа 2010

Решение с OL & LI является наиболее семантическим из всех, поскольку оно предоставляет информацию о номерах строк, и каждая строка представляет собой отдельный блок, так что вы можете стилизовать его как угодно. Числа по-прежнему видны в текстовых браузерах без CSS и JavaScript. Пользователи программ чтения с экрана могут переходить от строки к строке, пропускать строки, и они всегда знают, в какой строке они находятся и сколько строк. Они могут даже пропустить весь список.

Проблема с выбором на самом деле не в домене HTML / CSS / JS, потому что вы не можете решить вместо своего пользователя, что он хочет делать с скопированным текстом. Он мог бы захотеть скопировать его с или без этих номеров строк одинаково хорошо. Лучше хранить как можно больше семантической информации и позволить пользователю выбирать, какую из них он хочет использовать, чем предоставлять ему только простые данные без любых параметров.

Но если вы хотите предоставить ему простой способ копирования простого источника без какой-либо дополнительной разметки или номеров строк, дайте ему ссылку на исходный файл простого текста . Затем он сможет щелкнуть по нему и отобразить исходный текст в виде простого текста на отдельной странице. Он может скопировать и вставить его оттуда без каких-либо номеров строк и т. Д., И даже сделать ссылку на источник в виде простого текста из своих собственных документов или скопировать и вставить URL из адресной строки браузера, чтобы отправить его своему другу-программисту ;-) может даже составить список всех исходных текстовых файлов где-нибудь на вашем сайте.

Единственная проблема, с которой я столкнулся при использовании этой техники с OL & LI, заключается в том, что теги нельзя пересекать. Если какой-либо фрагмент (например, комментарий к блоку) начинается с одной строки и продолжается до других строк, вам нужно правильно закрыть всю разметку и снова открыть ее на следующей строке, и сделать это с каждой строкой, как это.

Да ... Если бы в какой-то будущей версии HTML было возможно автоматически нумеровать строки в любом контейнере (например, PRE, DIV и т. Д.), Они бы отображались в HTML без стилей и скриптов Java (хотя вы могли бы быть в состоянии стилизовать эти номера строк и отдельные строки, используя некоторые псевдоклассы) ... Но пока съешьте то, что у вас есть; -J

0 голосов
/ 04 февраля 2009

Альтернативы 

<ul>
  <li>Dotted list item</li>
</ul>

Печать: ** Элемент списка *

<ol>
  <li>Numbered list item</li>
</ol>

Отпечатки: 1. Элемент списка 

<dl>
<dt>Category</dt>
<dd>List Item</dd>
<dt>Category</dt>
<dd>List Item</dd>
</dl>

Дает только отступ для элемента списка.

Решение

Итак, чтобы сделать это без магии JS и в то же время нарушить некоторые семантические законы, нужно использовать только dt в списке dl. 

<dl>
  <dt>Item</dt>
  <dt>Item</dt>
</dl>

Надеюсь, это поможет: -)

0 голосов
/ 30 января 2009

Я думаю, что ответ больше связан с приложением, которое вы вставляете, а не с процессом копирования в браузере, и это на самом деле правильно для браузера?

Надеюсь, вы предоставляете семантический HTML и, следовательно, не будет ли копирование OL желаемым результатом? Что, если пользователь копировал и вставлял набор абзацев или текст, содержащий ссылку или изображение? Разве вы не подозреваете, что пользователь захочет скопировать абзац и вставить его с неповрежденным семантическим макетом?

0 голосов
/ 29 января 2009

Дайте этому шанс - он был написан довольно быстро, но может послужить отличным началом. Некоторые вещи, которые вы захотите сделать, это заменить старый список новым элементом, а не добавлять новый элемент непосредственно в тело, как я делаю в настоящее время. Это довольно легко, используя (селектор) .replaceWith (newElement) функциональность jQuery. 

<style type="text/css">
    div.newList {
        position:relative;
        width:300px;
        font-family:verdana;
        font-size:12px;
        line-height:150%;
    }
        div.newList div.column {
            padding-left:30px;
        }
            div.column p {
                margin:0;
                padding:0;
            }
        div.numbers {
            position:absolute;
            top:0;
            left:0;
            width:20px;
        }
            div.numbers p {
                text-align:right;
                padding:0;
                margin:0;
            }
</style>
<script type="text/javascript">

    $(document).ready(function(){

        var newDiv = document.createElement("div");
        $("body").append(newDiv);
        $(newDiv).addClass("newList").html("<div class='column'></div><div class='numbers'></div>");

        $("ol.alphabet li").each(function(){
            var index = $("ol.alphabet li").index(this);
            var content = $(this).text();
            $("div.column").append("<p>"+content+"</p>");
            $("div.numbers").append("<p>"+(index+1)+".</p>");
        });

        $("div.column p").each(function(){
            var index = $("div.column p").index(this);
            var height = $(this).height();
            $("div.numbers p:eq("+index+")").height(height);
        });

    });

</script>
<body>

    <ol class="alphabet">
        <li>This is a sample row that will teach me how to get all of the things lined up.</li>
        <li>Too Short.</li>
        <li>C</li>
    </ol>

</body>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...