CSS3 से इनपुट टेक्स्ट लंबाई सीमित करना

उत्तर

CSS3 से इनपुट टेक्स्ट लंबाई सीमित नहीं की जा सकती। CSS प्रस्तुति (लुक) के लिए है, व्यवहार/कार्यक्षमता के लिए नहीं।

सही तरीका: HTML maxlength एट्रिब्यूट

<!DOCTYPE html>
<html>
<head>
    <title>HTML maxlength एट्रिब्यूट</title>
</head>
<body>
    <form action="">
        छात्र नाम<br>
        <input type="text" name="name" maxlength="20"><br><br>
        <input type="submit" value="सबमिट">
    </form>
</body>
</html>

चित्रण

CSS3 से इनपुट टेक्स्ट लंबाई सीमित करना

अतिरिक्त: JavaScript वैलिडेशन

// रियल-टाइम कैरेक्टर काउंट
const input = document.querySelector('input[maxlength]');
const max = parseInt(input.maxLength, 10);

input.addEventListener('input', () => {
    const remaining = max - input.value.length;
    console.log(`शेष: ${remaining}`);
    
    // विजुअल फीडबैक
    if (remaining < 5) {
        input.style.borderColor = 'orange';
    }
    if (remaining === 0) {
        input.style.borderColor = 'red';
    }
});

क्यों CSS नहीं कर सकता?

CSS = प्रस्तुति लेयर (रंग, लेआउट, टाइपोग्राफी)
लंबाई सीमा = व्यवहार/वैलिडेशन लेयर
संकीर्णता (Separation of Concerns) सिद्धांत

संबंधित CSS (केवल दृश्य)

/* टेक्स्ट ओवरफ्लो विजुअल हैंडलिंग */
input {
    text-overflow: ellipsis;  /* ... दिखाता है जब टेक्स्ट ओवरफ्लो */
    white-space: nowrap;
    overflow: hidden;
}

/* लेकिन यह इनपुट को सीमित नहीं करता - केवल दिखाता है */