Vô hiệu hóa lựa chọn chữ bằng CSS hoặc JavaScript
Bạn có thể tắt lựa chọn chữ của cả một trang web hoặc một phần của trang bằng cách sử dụng CSS, JavaScript hoặc jQuery.
Cách tắt lựa chọn chữ của cả trang web bằng JavaScript
Sử dụng các thuộc tính sự kiện onmousedown và onselectstart với thẻbody để vô hiệu hóa lựa chọn chữ của cả trang web. Các sự kiện này ghi đè hành vi mặc định của trình duyệt.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body onmousedown="return false" onselectstart="return false">
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>Cách vô hiệu hóa lựa chọn chữ của một phần trang web bằng JavaScript
Sử dụng các thuộc tính sự kiện onmousedown và onselectstart với thẻ HTML trên những phần mà bạn muốn tắt tính năng chọn chữ. Trong ví dụ dưới đây, lựa chọn chữ bị vô hiệu hóa đối với thẻ div thứ 2.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div onmousedown="return false" onselectstart="return false">
Text selection is disabled for this text.
</div>
</body>
</html>Cách tắt lựa chọn chữ của cả trang web bằng CSS
Sử dụng thuộc tính CSS user-select với thẻ body để tắt tính năng chọn chữ của cả trang web. Đối với một số trình duyệt, bạn cần thêm tiện ích mở rộng trước user-select. Đây là danh sách đầy đủ các thuộc tính cho tất cả các trình duyệt:
- Chrome, Opera: user-select
- Safari: -webkit-user-select
- Mozilla: -moz-user-select
- IE 10+: -ms-user-select
Bạn cần đặt tất cả các thuộc tính này thành none để vô hiệu hóa lựa chọn chữ.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Founded in 2007, MUO has grown into one of the largest online technology publications on the web.
Our expertise in all things tech has resulted in millions of visitors every month and hundreds of thousands of fans on social media.
We believe that technology is only as useful as the one who uses it.
Our aim is to equip readers like you with the know-how to make the most of today's tech, explained in simple terms that anyone can understand.
We also encourage readers to use tech in productive and meaningful ways.
</div>
</body>
</html>Cách vô hiệu hóa lựa chọn chữ của một phần trang web bằng cách sử dụng CSS
Sử dụng thuộc tính CSS user-select với thẻ HTML trên những phần mà bạn muốn tắt tính năng chọn chữ. Bạn có thể nhắm mục tiêu các phần tử HTML đó bằng cách sử dụng một lớp hoặc ID. Trong ví dụ dưới đây, lựa chọn chữ bị vô hiệu hóa đối với thẻ div thứ 2. Ở đây, lớp được sử dụng để nhắm mục tiêu div thứ 2.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<style>
.disable-text-selection {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<div>
Text selection is enabled for this text.
</div>
<div class="disable-text-selection">
Text selection is disabled for this text.
</div>
</body>
</html>Cách tắt copy & paste bằng JavaScript
Bạn có thể tắt tính năng cắt, copy & paste bằng cách sử dụng các thuộc tính sự kiện oncut, oncopy và onpaste với các phần tử HTML đích. Nếu bạn muốn tắt tính năng cắt, copy & paste cho cả trang web, bạn cần sử dụng các thuộc tính sự kiện này với thẻ body. Bạn cũng có thể tắt tính năng kéo và thả bằng cách sử dụng các thuộc tính sự kiện ondrag và ondrop. Trong ví dụ dưới đây, cắt, copy & paste, kéo và thả bị tắt đối với thẻ input.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the below input element.
</div>
<input
type="text"
onselectstart="return false"
oncut="return false"
oncopy="return false"
onpaste="return false"
ondrag="return false"
ondrop="return false"
/>
</body>
</html>Cách tắt copy & paste bằng jQuery
Bạn có thể tắt tính năng cắt, copy & paste trên một trang web bằng hàm jQuery bind(). Trong hàm bind(), bạn phải chỉ định các sự kiện cắt, copy & paste được kích hoạt khi người dùng cố gắng cắt, sao chép hoặc dán bất kỳ thứ gì trên trang web. Đảm bảo nhúng thẻ script vào phần head để tải jQuery trước khi sử dụng.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Cut, Copy, and Paste is disabled for the complete web page.
</div>
<input type="text" />
<script type="text/javascript">
$(document).ready(function() {
$('body').bind('cut copy paste', function(event) {
event.preventDefault();
});
});
</script>
</body>
</html>Cách tắt nhấp chuột phải vào trang Web bằng JavaScript
Bạn có thể tắt nhấp chuột phải vào trang web của mình bằng cách sử dụng sự kiện oncontextmenu và bao gồm “return false” trong event handler.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
document.oncontextmenu = new Function("return false");
</script>
</body>
</html>Làm thế nào để vô hiệu hóa nhấp chuột phải vào một trang web bằng jQuery
Bạn có thể tắt nhấp chuột phải vào trang web của mình bằng cách sử dụng sự kiện contextmenu.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>This is the title of the web page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div>
Right Click is disabled for the complete web page.
</div>
<script type="text/javascript">
$(document).bind("contextmenu",function(e){
return false;
});
</script>
</body>
</html>Bảo vệ trang web của bạn khỏi tội phạm mạng
Tội phạm mạng sử dụng mọi công cụ có thể có để lấy cắp dữ liệu, spam trang web hoặc hack thông tin nhạy cảm từ các trang được bảo vệ. Ngày nay việc thêm một lớp bảo mật cho trang web của bạn để ngăn chặn những điều này là bắt buộc.
Vân Nguyễn
Dịch từ: https://www.makeuseof.com/disable-text-selection-cut-copy-paste-right-click-on-web-page/
Bình luận (0
)