Tắt Text Selection bằng CSS¶
Áp dụng cho:
- Chrome, Opera (older versions), IOS Safari: -webkit-user-select
- Safari: -webkit-touch-callout
- Mozilla: -moz-user-select
- KHTML browsers (Konqueror): -khtml-user-select
Ví dụ¶
Tắt Text Selection bằng JavaScript¶
Áp dụng Sự kiện onmousedown và onselectstart cho các thẻ <body> hoặc <div> để ngăn việc lựa chọn văn bản và sao chép / cắt trên trang web của bạn. Nó ghi đè hành vi mặc định của trình duyệt.
Ví dụ:¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<h2>Unselectable text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Tắt Copy, Cut, and Paste với JavaScript/jQuery.¶
Bạn có thể cho phép lựa chọn văn bản, nhưng ngăn chặn các chức năng sao chép và cắt bằng cách sử dụng các thuộc tính sự kiện oncopy, oncut và onpaste. Bằng cách thêm các thuộc tính này vào thẻ <input> của hộp văn bản, bạn có thể tắt các tính năng cắt, sao chép và dán. Người dùng còn lại với tùy chọn nhập trường theo cách thủ công với các thuộc tính này được đặt.
Example¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Copy, cut and paste disabled</h2>
<input type="text" onselectstart="return false" onpaste="return false;" onCopy="return false" onCut="return false" onDrag="return false" onDrop="return false" autocomplete=off/>
<br>
</body>
</html>Hiệu ứng tương tự có thể đạt được bằng cách sử dụng hàm jQuery bind () chỉ định các sự kiện cắt và sao chép được kích hoạt khi người dùng cắt hoặc sao chép văn bản.
Ví dụ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Copy and cut disabled</h2>
<p>I am a text and you cannot copy or cut me.</p>
<script>
$(document).ready(function() {
$('body').bind('cut copy', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>Tắt nhấp chuột phải bằng JavaScript/jQuery¶
Để tắt nhấp chuột phải vào trang của bạn, bạn cần thêm sự kiện oncontextmenu và "return false" trong trình xử lý sự kiện. Nó sẽ chặn tất cả quyền truy cập vào menu ngữ cảnh khi nhấp chuột phải vào chuột.
Ví dụ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Copy and cut disabled</h2>
<p>I am a text and you cannot copy or cut me.</p>
<script>
$(document).ready(function() {
$('body').bind('cut copy', function(e) {
e.preventDefault();
});
});
</script>
</body>
</html>Sử dụng hàm bind () jQuery để tắt tính năng nhấp chuột phải. Phương pháp này vô hiệu hóa tính năng nhấp chuột phải (menu ngữ cảnh) trên trường văn bản và cũng cảnh báo người dùng bằng một thông báo bật lên.
Example¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
</head>
<body>
<h2>Right-click disabled</h2>
<p>For this page the right-click is disabled.</p>
<script>
$(document).ready(function() {
$("body").on("contextmenu", function(e) {
return false;
});
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét