JavaScript के बिना HTML में छवि को ड्रैग/सेलेक्ट होने से रोकें

CSS-ओनली समाधान

JavaScript के बिना छवियों को ड्रैग और सेलेक्ट होने से रोकने के लिए CSS user-select, user-drag, और pointer-events प्रॉपर्टीज का उपयोग करें।

CSS प्रॉपर्टीज

.no-drag-select {
    /* चयन रोकें */
    user-select: none;
    -webkit-user-select: none;  /* Safari/पुराने Chrome */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge Legacy */
    
    /* ड्रैग रोकें */
    user-drag: none;
    -webkit-user-drag: none;    /* WebKit/Blink */
    -moz-user-drag: none;
    
    /* वैकल्पिक: पॉइंटर इवेंट्स पूरी तरह अक्षम करें */
    /* pointer-events: none; */ /* लेकिन फिर क्लिक भी काम नहीं करेंगे */
}

उदाहरण

<!DOCTYPE html>
<html>
<head>
    <style>
        .protected-image {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            
            user-drag: none;
            -webkit-user-drag: none;
            -moz-user-drag: none;
            
            /* वैकल्पिक: कर्सर बदलें */
            cursor: default;
        }
        
        /* तुलना के लिए सामान्य छवि */
        .normal-image {
            cursor: default;
        }
        
        .demo-container {
            display: flex;
            gap: 30px;
            padding: 20px;
            flex-wrap: wrap;
        }
        
        .demo-box {
            text-align: center;
        }
        
        .demo-box img {
            max-width: 300px;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .label {
            margin-top: 10px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <h2>छवि सुरक्षा तुलना</h2>
    <p>दोनों छवियों को ड्रैग करने और टेक्स्ट की तरह सेलेक्ट करने का प्रयास करें:</p>
    
    <div class="demo-container">
        <div class="demo-box">
            <img src="https://via.placeholder.com/300x200/667eea/ffffff?text=सुरक्षित+छवि" 
                 alt="सुरक्षित छवि" class="protected-image">
            <div class="label">संरक्षित (CSS के साथ)</div>
            <small style="color:#666;">ड्रैग/सेलेक्ट अक्षम</small>
        </div>
        
        <div class="demo-box">
            <img src="https://via.placeholder.com/300x200/764ba2/ffffff?text=सामान्य+छवि" 
                 alt="सामान्य छवि" class="normal-image">
            <div class="label">सामान्य (कोई सुरक्षा नहीं)</div>
            <small style="color:#666;">ड्रैग/सेलेक्ट सक्षम</small>
        </div>
    </div>
</body>
</html>

HTML एट्रिब्यूट विकल्प

<img> पर draggable एट्रिब्यूट:

<!-- ड्रैग अक्षम करें (लेकिन चयन नहीं) -->
<img src="image.jpg" draggable="false" alt="विवरण">

<!-- ड्रैग सक्षम करें (डिफ़ॉल्ट छवियों के लिए true) -->
<img src="image.jpg" draggable="true" alt="विवरण">

संयुक्त दृष्टिकोण (सबसे मजबूत)

<img src="protected.jpg" 
     alt="संरक्षित छवि"
     draggable="false"
     style="
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-drag: none;
        -webkit-user-drag: none;
     ">

सेलेक्ट इवेंट रोकना (JavaScript बैकअप)

यदि CSS पर्याप्त नहीं है (कुछ ब्राउज़र्स/स्थितियों में):

<script>
// सभी छवियों पर चयन रोकें
document.addEventListener('selectstart', (e) => {
    if (e.target.tagName === 'IMG') {
        e.preventDefault();
    }
});

// ड्रैग स्टार्ट रोकें
document.addEventListener('dragstart', (e) => {
    if (e.target.tagName === 'IMG') {
        e.preventDefault();
    }
});

// राइट-क्लिक संदर्भ मेनू रोकें (वैकल्पिक)
document.addEventListener('contextmenu', (e) => {
    if (e.target.tagName === 'IMG') {
        e.preventDefault();
    }
});
</script>

इनपुट फील्ड्स पर ज़ूम रोकना (iOS)

संबंधित मुद्दा: iOS पर फोकस होने पर इनपुट फील्ड्स में ज़ूम होना:

<style>
/* फॉन्ट साइज़ 16px+ सेट करके iOS ज़ूम रोकें */
input, select, textarea {
    font-size: 16px; /* या 1rem */
}

/* या वीडियो मेटा टैग */
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">