HTML 텍스트가 선택 가능해지는 것을 방지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

HTML 텍스트가 선택 가능해지는 것을 방지하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-10 09:49:02

원래의

579명이 탐색했습니다.

How to Prevent HTML Text from Being Selectable?

HTML 텍스트가 선택되지 않도록 방지하는 방법

웹 페이지에 텍스트를 레이블로 포함하고 선택성을 비활성화하려면 텍스트 위로 마우스를 가져가면 마우스 커서가 텍스트 선택 커서로 변환되지 않습니다.

CSS3 해결 방법:

최신 브라우저를 대상으로 하는 경우 CSS3을 활용하세요.

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

로그인 후 복사

<label class="unselectable">Unselectable label</label>

로그인 후 복사

JavaScript 대체:

이전 브라우저의 경우, JavaScript 대체 방법은 다음과 같습니다. 고용:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                var labels = document.getElementsByTagName('label');
                for (var i = 0; i < labels.length; i++) {
                    disableSelection(labels[i]);
                }
            };
            function disableSelection(element) {
                if (typeof element.onselectstart != 'undefined') {
                    element.onselectstart = function() { return false; };
                } else if (typeof element.style.MozUserSelect != 'undefined') {
                    element.style.MozUserSelect = 'none';
                } else {
                    element.onmousedown = function() { return false; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

로그인 후 복사

jQuery 솔루션:

jQuery를 사용하는 경우 다음 코드를 사용하여 기능을 확장하세요.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $.fn.extend({ 
                disableSelection: function() { 
                    this.each(function() { 
                        if (typeof this.onselectstart != 'undefined') {
                            this.onselectstart = function() { return false; };
                        } else if (typeof this.style.MozUserSelect != 'undefined') {
                            this.style.MozUserSelect = 'none';
                        } else {
                            this.onmousedown = function() { return false; };
                        }
                    }); 
                } 
            });

            $(document).ready(function() {
                $('label').disableSelection();            
            });
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

로그인 후 복사

위 내용은 HTML 텍스트가 선택 가능해지는 것을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!