Нумерация строк и копирование / вставка (HTML / CSS)
Какой трюк JS / CSS я могу использовать для предотвращения копирования и вставки чисел в упорядоченном списке?
<OL>
<LI>A
<LI>B
<LI>C
</OL>
- А
- B
- C
Если это невозможно, какие альтернативы доступны?
Благодарность
Точнее, он будет использоваться для предложения фрагментов кода в документации для программистов. Мы ищем различные решения, чтобы убедиться, что при копировании и вставке копируется только фрагмент, а не нумерация строк. Благодарность
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 11
Я предполагаю, что это зависит от браузера. Я пробовал использовать IE 7, Firefox 3 и Chrome, и ни один из них не копирует числа (Chrome "кажется" копирует их в выделенном фрагменте, но после вставки их там нет).
Chrome доступен только в Windows.
Они также не копируют с помощью IE6 на WINXP.
Номера элементов также не копируются в Opera на WinXP.
Для меня я получаю либо числа (firefox 3), либо символ '#' (firefox 2), скопированные вместе, даже если они не выбраны. на ie6 я просто получаю выбор.
Копирование номеров OL - это поведение браузера. Я считаю, что некоторые браузеры этого не делают, но большинство - нет.
Вы можете использовать JavaScript, чтобы переписать код после загрузки страницы, чтобы он выглядел так же, но не внизу. Это решит вашу проблему с копированием, но вызовет другие проблемы, такие как доступность.
По сути, способ добиться этого - переписать код в Javascript так, чтобы он состоял из 2 столбцов, 1 с нумерацией и 1 с содержимым. Вы можете сделать это с помощью такой системы сеток, как YUI Grids или Чертеж. Пользователь сможет выбрать второй столбец с его содержимым, не выбирая первый.
Проблема в том, что это разрушает семантическую разметку для пользователей программ чтения с экрана, и они больше не получают преимуществ от упорядоченного списка. Возможно, это можно сделать в режиме onmousedown, чтобы вы переписывали его только тогда, когда пользователь пытается выделить текст. Не то чтобы я проверял эту идею.
Заявление об ограничении ответственности: я работаю в Yahoo!
Я попытался это сделать и написал быстрое решение на основе jQuery. Это было спонтанно и незапланированно, но это работает. Источник доступен здесь: stackoverflow.com/questions/465526/…
редактировать извините, забыл добавить javascript, чтобы отключить отмену выделения для чисел ... посмотрите на код сейчас.
Отметьте это для отключения выбора кросс-браузера: http://answers.yahoo.com/question/index?qid=20090107041047AAvbI1u
Если Javascript - вариант, вы можете добавить числа самостоятельно:
var ol = document.getElementsByTagName("ol")[0];
for(var i=0; i<ol.childNodes.length; i++) {
ol.childNodes[i].innerHTML = "<span style='MozUserSelect:none;'>"+i+".</span> "+ol.childNodes[i].innerHTML;
}
или что-то типа того.
Тогда, конечно, избавьтесь от нумерации CSS.
Это не остановит поведение копирования и вставки (в браузерах, в которых оно есть), чего, я думаю, пытается достичь OP.
Попробуйте - он был написан довольно быстро, но может послужить отличным началом. Некоторые вещи, которые вы захотите сделать, - это заменить старый список новым элементом, а не добавлять новый элемент непосредственно в тело, как я сейчас делаю. Это довольно просто использовать функциональность jQuery (selector) .replaceWith (newElement).
<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>
Я думаю, что ответ больше связан с приложением, в которое вы вставляете, а не с процессом копирования браузера, и на самом деле это то, что браузер должен делать?
Надеюсь, вы предоставляете семантический HTML и, следовательно, не желаете ли копировать OL? Что, если пользователь копировал и вставлял набор абзацев или текста, содержащих ссылку или изображение? Разве вы не подозреваете, что пользователь захочет иметь возможность скопировать абзац и вставить его с неизменным семантическим макетом?
Вы можете использовать изображения для отображения чисел, и тогда они не будут скопированы. 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 }
Итак, после этого вам просто нужно выяснить, куда поместить изображение.
Вы не можете реально контролировать поведение буфера обмена браузера / ОС. Что вы можете сделать, так это предоставить ссылку «Копировать» и использовать 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% функциональным. ;-)
А как насчет использования таблицы, как в http://bugzilla.gnome.org/attachment.cgi?id=127131
Альтернативы
<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>
Надеюсь это поможет :-)
Решение с OL и LI является наиболее семантическим из всех, потому что оно предоставляет информацию о номерах строк, а каждая строка представляет собой отдельный блок, поэтому вы можете стилизовать его как угодно. Числа по-прежнему видны в текстовых браузерах без CSS и JavaScript. Пользователи программ чтения с экрана могут переходить от строки к строке, пропускать строки, и они всегда знают, в какой строке они находятся и сколько там строк. Они могут даже пропустить весь список.
Проблема с выбором на самом деле не в домене HTML / CSS / JS, потому что вы не можете решить вместо своего пользователя, что он хочет делать с скопированным текстом. Он мог бы захотеть скопировать это с участием или без с этими номерами строк в равной степени. Лучше хранить как можно больше семантической информации и позволить пользователю выбирать, какую из них он хочет использовать, чем давать ему только простые данные без параметров любой.
Но если вы хотите предоставить ему простой способ скопировать простой исходный текст без какой-либо дополнительной разметки или номеров строк, дайте ему ссылку на исходный текстовый файл. Затем он сможет щелкнуть по нему и отобразить исходный текстовый файл на отдельной странице. Он может скопировать и вставить его оттуда без каких-либо номеров строк и т. д., И даже сделать ссылку на текстовый источник из своих собственных документов или скопировать URL-адрес из адресной строки браузера, чтобы отправить его своему другу-программисту ;-) Вы может даже составить список всех исходных файлов в виде простого текста где-нибудь на вашем веб-сайте.
Единственная проблема, с которой я столкнулся при использовании этой техники с OL и LI, заключается в том, что метки нельзя пересекать. Если какой-то фрагмент (например, комментарий блока) начинается с одной строки и продолжается до других строк, вы должны правильно закрыть всю разметку и снова открыть ее на следующей строке, и делать это с каждой такой строкой.
Ха ... Если бы только в какой-то будущей версии HTML можно было автоматически нумеровать строки в любом контейнере (например, PRE, DIV и т. д.), И они отображались бы в HTML без стилей и сценариев Java (хотя вы могли бы стилизовать эти номера строк и разделять строки какими-то псевдоклассами) ... А пока ешьте то, что есть; -J
Было бы полезно описать, в каком контексте вы работаете. Что делает очевидные решения проблематичными для вас? Почему бы и нет: удалите регулярное выражение числа vi, удалите их вручную, скопируйте исходный код страницы и используйте функцию поиска и замены, чтобы удалить эту пометку и т. д.