Po pierwsze, byłem tu How to make HTML Text unselectable
Ale to nie rozwiązuje mojego problemu (wersja JavaScript działa dobrze, ale trzeba zrobić to za pomocą HTML i CSS, nie mogę użyć JavaScript) Użyłem zalecanego CSS, ale spójrz na mój DEMO przeciągając mysz z [przeciągnij stąd] na [do tutaj] zobaczysz, że tekst jest nadal do wyboru.
jakikolwiek sposób, aby to naprawdę nie można było wybrać?
Dziękimake html tekst Nie można wybrać
Po zapoznaniu się z tym problemem, przyszło mi do głowy inny sposób, aby uniemożliwić użytkownikowi zaznaczanie tekstu podczas przeglądania strony, w zasadzie, zakładanie maski nad tekstem docelowym:
Twój Fiddle aktualizowane here!
Przykład:
CSS
.wrapTxt {
position: relative;
}
.wrapTxt .mask {
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML
<p class="wrapTxt">
This is my text! My text is mine and no one Else's!
<span class="mask"></span>
</p>
Zasada tu jest prosta (Fiddle), mają element blokowy nad tekstem, zajmując całe jego opakowanie.
Upadek jest trudną implementacją, jeśli potrzebujesz jednej linii do wybrania, a kolejnej nie. Linki do "nie do wybrania" nie będą dostępne.
Ostatnia uwaga:
Użytkownik zawsze może przejść wokół tego, czy patrząc na kodzie źródłowym, lub przeciągając myszką od góry do dołu strony.
Trzykrotne kliknięcie również działa w celu zaznaczenia tekstu. –
Można użyć CSS tak:
CSS
.unselectable {
-webkit-user-select: none; /* Chrome all/Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
/* No support for these yet, use at own risk */
-o-user-select: none;
user-select: none;
}
Dla starszych wersjach IE, problem jest zazwyczaj trudniejsze do czynienia, ale można użyć zachowanie:
CSS
.unselectable {
behavior: url(ieUserSelectFix.htc);
}
a plik zachowanie "ieUserSelectFix.htc":
<public:component lightweight="true">
<public:attach event="ondocumentready" onevent="stopSelection()" />
<script type="text/javascript">
<!--
function stopSelection() {
element.onselectstart = function() { return(false); };
element.setAttribute('unselectable', 'on', 0);
}
//-->
</script>
</public:component>
z javascript można:
yourElement.onselectstart = function() { return(false); };
spróbować coś takiego
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Disable /Prevent Text Selection jQuery-JavaScript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Begin:
// Jquery Function to Disable Text Selection
(function($){if($.browser.mozilla){$.fn.disableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":"none"})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).css({"MozUserSelect":""})})}}else{if($.browser.msie){$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("selectstart.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("selectstart.disableTextSelect")})}}else{$.fn.disableTextSelect=function(){return this.each(function(){$(this).bind("mousedown.disableTextSelect",function(){return false})})};$.fn.enableTextSelect=function(){return this.each(function(){$(this).unbind("mousedown.disableTextSelect")})}}}})(jQuery)
// EO Jquery Function
// Usage
// Load Jquery min .js ignore if already done so
// $("element to disable text").disableTextSelect();
// $("element to Enable text").enableTextSelect();
//
jQuery(function($) {
$("body").disableTextSelect();
$("#code").mouseover(function(){
$("body").enableTextSelect();
});
$("#code").mouseout(function(){
// Code for Deselect Text When Mouseout the Code Area
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
$("body").disableTextSelect();
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 10px;
margin-top: 10px;
}
#code
{
padding:20px;
border:2px dashed #CCC;
font-family:"Courier New", Courier, monospace;
font-size:15px;
background-color:#EEE;
}
-->
</style>
</head>
<body>
<h2>Disable /Prevent Text Selection jQuery-JavaScript</h2>
<p>Below this Code Area User can Allow to Select a Text in other Area text selection was disabled</p>
<p id="code">
$(".elementsToDisableSelectFor").disableTextSelect();</p>
<p>When you are leaving above code box selection was deselected! If selected !</p>
</body>
</html>
Sprawdź wyjście jsfiddle:
EDIT: Jest to metoda cross-browser zapobiegania zaznaczenie tekstu przy użyciu Nie można wybrać = "on" atrybutu elementu.
<!DOCTYPE html>
<html>
<head>
<title>Unselectable Text</title>
<style type="text/css">
[unselectable=on] { -moz-user-select: none; -khtml-user-select: none; user-select: none; }
</style>
</head>
<body id="doc">
<p unselectable="on">For example, the text in this paragraph
cannot be selected.
For example, the text in this paragraph
cannot be selected
For example, the text in this paragraph
cannot be selected</p>
</body>
</html>
Nakładka pełny przejrzysty tekst:
<div style="position:absolute;left: 1;top:1;z-index:1;font-size: 10pt;color: rgb(0, 0, 0);">highline me</div><br/><div style="position:absolute;left: 0;top:0;;z-index:2;font-size: 20pt;color: rgba(0, 0, 0, 0);">*********</div>
myślę, że to niemożliwe, aby tekst 100% Nie można wybrać. Użytkownik zawsze może otworzyć źródło i skopiować go z tego miejsca. – Manuel
Zgadzam się, mam na myśli z przeglądarki. – skafandri
Wiem, że jest to możliwe, aby było trudniej niż zwykle, ale to wymaga javascript – Manuel