Остановить выделение текста HTML - PullRequest
Новая
       5

Остановить выделение текста HTML

7 голосов
/ 08 марта 2012

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

Это на самом деле просто неопрятно, но есть ли отличный способ остановить это, кроме использования изображений вместо текста?

Спасибо

Ответы [ 3 ]

13 голосов
/ 08 марта 2012

Здесь css отключает выбор текста. Как отключить выделение текста с помощью CSS? 

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
2 голосов
/ 08 марта 2012

Это работает для меня

Как и предлагалось, поместите стили CSS в 

body, div
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

и добавьте их, чтобы разрешить выбор в полях формы 

input, textarea, .userselecton
{
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Обратите внимание на -moz-none то, что нужно, или возможность ввода для входных данных не работает.

для IE, я добавляю 

<script type="text/javascript">
    window.addEvent( "domready", function()
    {
        document.addEvent( "selectstart", function(e)
        {
            if ( (e.target.tagName == "INPUT") ||
             (e.target.tagName == "TEXTAREA") ||
                 (e.target.hasClass("userselecton")))
            {
                return true;
            }
            return false;
        } );
    } );
</script>

Это не только предотвращает выделение фонового текста, но и позволяет выделять поля ввода и и элемент, который вы добавиликласс userseleton включен.

2 голосов
/ 08 марта 2012

Как подсказал @arunes, вы можете сделать это с помощью CSS для большинства браузеров. Однако я читал, что это не работает с IE 6-8 (по крайней мере). Так что для этого вам может понадобиться что-то вроде: 

document.getElementById("divDoubleClick").onselectstart = function() { return false; };
...