Форум dkLab и Denwer

AKS

WingedFox
Все работает, как ожидается. Я, кажется, догадываюсь, что Вы задумали... Если это так, остается позавидовать Вашей изобретательности! Попробую заменить ранний способ на этот.

WingedFox

AKS
Нет, я это не задумывал 8*)
Так будет сильно тормозить всё. Это просто проверка - сбрасывается выделение или нет.

Первая версия вызывалась на каждое событие mousemove и достаточно сильно подтормаживала. Потом я перенёс обработчик на mousedown, т.к. выделение не вылезает за пределы поля ввода.
Но focus() работает по разному во всех браузерах. Возможно, что Опера некоторых версий просто не фокусируется на этом поле, по одной ей известным причинам.

Что можно попробовать: сделать поле видимым и с помощью z-index: -1 убрать его под <body>. Правда я это не пробовал.

PS: т.к. в IE надо перемещать поле под курсор, чтобы страница не дёргалась... прикручивать onmouseover - плохая идея, будет тормозить вполне ощутимо.

AKS

WingedFox
Да, так оно и есть (о тормозах).
По поводу моей задачки: я таскаю по странице div и Опера 8 выделяет вслед за курсором текстовые фрагменты, но тут же сбрасывает выделение, фокусируясь на input'е. Затем снова выделяет, затем тут же сбрасывает. Следовательно, она все же фокусируется, но не удерживает фокус.
У меня там интересная ситуация с аттачем события resize, может ответите здесь, между делом (у Вас это в двух словах, наверно, получится)?

WingedFox

AKS
Для Оперы можно попробовать прикручивать захват мышиных событий.
В 7.х версиях он глючил, но может быть в 8 и заработает.

В какие именно моменты фокус сбрасывается? после наступления события mouseover?
можно попробовать ещё поиграться с типами инпутов.

А что за "resize" и что с ним?
Если к выделению текста он не имеет отношения - лучше вынести в отдельную тему.

Denis Usenko

Удивительно, но в Opera 90b для запрета выделения работает такой способ:

Code (JavaScript):	скопировать код в буфер обмена
el.onmousedown = function(){this.focus()}

Забавно:)
Запрещает так же как и ИЕшный onselectstart="event.returnValue=false", т.е. выделить всетаки можно, если начать выделение с незапрещенной области

Юрий Насретдинов

el.focus(); ? В других это работает?

WingedFox

Наверное ребята восприняли

W3C DOM Level 2 wrote:

Unlike the HTML event focus, DOMFocusIn can be applied to any focusable EventTarget, not just FORM controls.

как руководство к действию.

Хотя

W3C DOM Level 2 wrote:

focus
The focus event occurs when an element receives focus either via a pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.

Ну и, как минимум, в IE такой трюк не работает.

Denis Usenko

Юpий Насрeтдинов

Quote:

el.focus(); ? В других это работает?

Естественно нет :) А кто то знает универсальный способ?
WingedFox
Увы. обнаружил совершенно случайно :).

Dark-Demon

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

WingedFox

Dark-Demon
Это только для перемещения имеет смысл. А для драг-дропа нужно ещё и цели отлавливать.

Dark-Demon

а потенциальные цели ещё выше дива выводить :)

Сергей Кокшаров · Guest Карма: 388 поощрить/наказать

Запрет выделения для браузеров

Code (css):	скопировать код в буфер обмена
body { /* Mozilla / -moz-user-select: none; / Opera / -o-user-select:none; / Safari */ -khtml-user-select: none; }

Code (JavaScript):	скопировать код в буфер обмена
/* Internet Explorer */ if (/Explorer/.test(navigator.userAgent)) document.body.onselectstart = new Function("return false;");

Ну как? :)

С ув. Сергей Кокшаров.
marqueetool.net - Javascript Rectangular Marquee Tool

Юрий Насретдинов

Сергей Кокшаров wrote:

-o-user-select:none;

Начиная с какой версии это работает?

Guest · Карма: 388 поощрить/наказать

c 9-ой точно.

AKS

Гость wrote:

c 9-ой точно.

Не-а! Мои две "девятки" (Version 9.00 Build 8212 и Version 9.10 Build 8679) меня в этом деле (-o-user-select:none) разочаровали... :(

Guest · Карма: 388 поощрить/наказать

да, проверили -o-user-select. не работает. видать пропарился :(
значит для оперы один способ
document.onmousedown = function(event) {event.preventDefaults();}
(не проверенено)

AKS

Гость wrote:

preventDefaults(

Это св-во надо писать в единственном числе (preventDefault), или Вы хотите отменить все возможные поведения по-умолчанию? :)
Вообще, если бы все было так просто, то этой темы здесь бы не было...

Юрий Насретдинов

AKS wrote:

если бы все было так просто, то этой темы здесь бы не было...

Теперь понятно, почему, фактически, нигде нет внятного ответа на мой вопрос :).

WingedFox

Ещё 5 копеек в тему =)
Для Оперы (и всех остальных) я нашёл если не самый лучший, то вполне эффективный метод запрещения выделения:
Во время таскания объекта можно
а) восстанавливать изначальное выделение через window.getSelection()
б) просто сбрасывать его

Что интересно, этот метод вообще не тормозит.
Правда, я не пробовал таскать блоки над большим количеством выделенного текста для первого варианта.

Тест второго варианта: debugger.ru/temp/em/3.html

Алексей Нестеров · Guest Карма: 388 поощрить/наказать

У меня таких проблем не возникало novastudio.org.ua/windows/

AKS

Алексей Нестеров wrote:

У меня таких проблем не возникало...

А я заметил, окрыв вашу страничку в браузере, который в данной теме считается проблемным (т.е. Opera). Даже в Opera 9.22 можно увидеть "блики" выделения, не говоря уже про версии 7 и 8, которые выделяют все подряд. А что будет в "девятке", если на странице будет побольше текста?

Eloy · Guest Карма: 388 поощрить/наказать

<body onSelectStart = "return false;" onmousedown = "return false;">
работает в Mazila, IE, и Opera в версии 9.26 меньше не пробовал

EDU · Guest Карма: 388 поощрить/наказать

Такой сброс не подойдет?
        function clearSelection()
        {
            var sel;
            if(document.selection && document.selection.empty)
            {
                document.selection.empty();
            }
            else if(window.getSelection)
            {
                sel = window.getSelection();
                if(sel && sel.removeAllRanges)
                sel.removeAllRanges();
            }
        }
Взято отсюда: snowcore.blogspot.com/2008/04/prevent-text-selection.html

EDU · Guest Карма: 388 поощрить/наказать

P.S. Давно юзаю подобное своей функциии для Drag'n'Drop при простановке новых координат таскаемого элемента. Пока багов не наблюдал.

bæv

М

Перенесено из форума: Склад готовых решений :: JavaScript.
Перенесено в форум: Разное :: JavaScript.

Гость · Guest Карма: 388 поощрить/наказать

Eloy wrote:

<body onSelectStart = "return false;" onmousedown = "return false;">
работает в Mazila, IE, и Opera в версии 9.26 меньше не пробовал

Как раз не работает в Мозилле :)

Denis Usenko

Таки, сладить с оперой можно через псевдо-элемент "::selection". Он правда ничего не запрещает, но позволяет управлять внешним видом выделения

Code (css):	скопировать код в буфер обмена
.no-select{ /* запрет выделения для мозиллы и сафари / -moz-user-select: none; -webkit-user-select: none; } / CSS3. В опере пока запретить выделения нельзя но можно убрать визуальный эффект. */ .no-select::selection { color: inherit }

Danilka · Guest Карма: 388 поощрить/наказать

Code (JavaScript):	скопировать код в буфер обмена
function selectable( elem, bool ){ //elem = document.getElementById( id ); if ( !elem ) return; elem.unselectable = bool ? "off" : "on"; // IE elem.onselectstart = function(){ return bool; }; // IE if ( elem.style ) elem.style.MozUserSelect = bool ? "" : "none"; // FF }

Code (html):	скопировать код в буфер обмена
<img (december.com/html/4/element/img.html) onLoad="function selectable( this, false );" onMouseDown="...; return false;" src="..."> (december.com/html/4/element/.html)

+ если хочется, то можно активировать выделение.

Danilka · Guest Карма: 388 поощрить/наказать

Простите, описался.[исправлено] onLoad="function selectable( this, false );"
Если нужно, то можно вызвать не из элемента, а откуда угодно, но тогда по id сначала выбрать, а после уже передавать элемент. Ну там кусок закаментирован, должно быть понятно.
Работает во всех браузерах, которые у меня есть на машине: Chrome, FF3, Opera9, Safari3.2 win, IE6, IE7.

p.s. Ну и кривой же у форума парсер или js кнопки..

Александр Михалицын

Danilka,

Quote:

p.s. Ну и кривой же у форума парсер или js кнопки..

Что кривое?

Ваш пост сейчас исправлю.

Denis Usenko

Danilka, не очень-то удобно для текстовых нодов в верстке. Тогда уж так:

Code (css):	скопировать код в буфер обмена
[unselectable="on"]{ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; } [unselectable="on"]::selection { color: inherit }

и управлять в js:

Code (JavaScript):	скопировать код в буфер обмена
htmlElement.setAttribute('unselectable','off') htmlElement.setAttribute('unselectable','on')

В реальном проекте не очень сложно записать rules'ы в styleSheets document'а. Это, имхо, наиболее кроссбраузерно.

ЗЫ.
Ах-ты черт, забыл про особенность этого unselectable не распространять действие на дочерние узлы )-: Все приходится делать через оное место.

Code (css):

скопировать код в буфер обмена

Code (html):

скопировать код в буфер обмена

<b (december.com/html/4/element/b.html) class="unselectable"> (december.com/html/4/element/.html)</b><b (december.com/html/4/element/b.html) class="unselectable" id="d1"> (december.com/html/4/element/.html)</b><br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d1').className = 'unselectable' "> (december.com/html/4/element/.html)unselectable</button>
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d1').className = '' "> (december.com/html/4/element/.html)selectable</button>

Denis Usenko

Неплохо бы добавить возможность выделять текст в input'ах и textarea. В presto и khtml/webkit ничего делать не надо, они сами умные, в msie добавляем проверок, а вот с Фоксом не получается сладить, "-moz-user-select: normal !important;" он не понимает (( Как побороть ?

Code (css):

скопировать код в буфер обмена

Denis Usenko

Нашел решение: forum.mozilla-russia.org/viewtopic.php?pid=103584
Все возможные рабочие значения для -moz-user-select:

Code (any language):	скопировать код в буфер обмена
none text element elements all toggle tri-state auto // internal value - please use nsFrame::IsSelectable() -moz-all // force selection of all children, unless an ancestor has NONE set - bug 48096 -moz-none // Like NONE, but doesn't change selection behavior for descendants whose user-select is not AUTO.

Забавно, но здесь нет указанного в доках normal ))
Соответственно стили будут такими:

Code (css):

скопировать код в буфер обмена

.unselectable {
-moz-user-select: -moz-none; /* Mozilla Firefox */
-khtml-user-select: none; /* Konqueror, Safary, Chrome. Останется ли поддержка в будущем ? */
-webkit-user-select: none; /* Safary, Chrome */
user-select: none; /* CSS3 -- на будущее */
behavior: expression( /* MSIE perversion */
(
this.onselectstart = function() {
return (/^(?:INPUT|TEXTAREA)$/).test( event.srcElement.tagName ) ? /* если input или textarea */
event.cancelBubble = true : /* оставить их в покое, иначе -- */
(' ' + this.className + ' ').indexOf(' unselectable ') < 0 /* -- в зависимости от наличия класса unselectable */
}
),
( this.style.behavior = null ) /* одноразовый expression */
);
}

/* CSS3. В опере пока запретить выделения нельзя но можно убрать визуальный эффект. */
.unselectable::selection { color: inherit }

Имеет ли смысл убирать "-khtml-user-select", вроде Konqueror сейчас тоже на вебките?

WingedFox

Denis Usenko wrote:

event.cancelBubble = true : /* оставить их в покое, иначе -- */
(' ' + this.className + ' ').indexOf(' unselectable ') < 0 /* -- в зависимости от наличия класса unselectable */

Учитывая привязку стиля к названию класса данные строчки лишены смысла.

Denis Usenko

WingedFox,
Если бы это был гипотетический "-msie-user-select: expression( посчитать и вернуть )" -- то тогда да, смысла бы не было. А здесь behavior используется чтобы повесить обработчик onselectstart на нужный элемент, после чего класс в стилях и элемент уже никак не связаны, то есть если элемент лишить класса, обработчик останется висеть.
Причем каждый раз при установке класса оonselectstart будет устанавливаться заново, а если бы не было удаления "this.style.behavior = null", то и при каждом reflow.

Вот пример, можно пощелкать, попереключать классы в браузере:

Code (css):

скопировать код в буфер обмена

Code (html):

скопировать код в буфер обмена

<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d1').className = 'us1' "> (december.com/html/4/element/.html)unselectable</button>
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d1').className = '' "> (december.com/html/4/element/.html)selectable</button>

<div (december.com/html/4/element/div.html) id="d1"> (december.com/html/4/element/.html)Когда речь идет о галактиках, восход оценивает непреложный ионный хвост, хотя для имеющих глаза-телескопы туманность Андромеды показалась бы на небе величиной с треть ковша Большой Медведицы</div>

<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d2').className = 'us2' "> (december.com/html/4/element/.html)unselectable</button>
<br (december.com/html/4/element/br.html) /> (december.com/html/4/element/.html)<button (december.com/html/4/element/button.html) onclick=" document.getElementById('d2').className = '' "> (december.com/html/4/element/.html)selectable</button>

<div (december.com/html/4/element/div.html) id="d2"> (december.com/html/4/element/.html)Терминатор, в первом приближении, точно вызывает перигелий, данное соглашение было заключено на 2-й международной конференции "Земля из космоса - наиболее эффективные решения".</div>

------
PS. Нашел сегодня отличную статью по expression: lusever.livejournal.com/15868.html. Так что код можно еще уменьшить убрав из expression'ов this

matiash · Guest Карма: 388 поощрить/наказать

ААААа, спасибо Denis Usenko!!!Denis Usenko

matiash · Guest Карма: 388 поощрить/наказать

Ты крутой чувак!!!

Александр Михалицын

М

matiash,
вы знаете значение слова "чувак"? Прямо скажем, оно не очень хорошее...

	Разное :: JavaScript :: Форум dkLab и Denwer Forum Index	All times are GMT + 3 Hours Goto page Previous 1, 2
Page 2 of 2		Email to a Friend.