एचटीएमएल <textarea>
में दर्ज किए जा सकने वाले वर्णों की अधिकतम संख्या को कैसे प्रतिबंधित करें? मैं एक क्रॉस-ब्राउज़र समाधान की तलाश में हूं।एचटीएमएल <textarea>
उत्तर
TEXTAREA
टैग एक MAXLENGTH
तरीका है कि एक INPUT
टैग करता है विशेषता, कम से कम सबसे मानक ब्राउज़रों में नहीं जरूरत नहीं है। अक्षर हैं जो हो सकता है की संख्या को सीमित करने के लिए एक बहुत ही सरल और प्रभावी तरीका एक TEXTAREA
टैग में टाइप किया है:
<textarea onKeyPress="return (this.value.length < 50);"></textarea>
नोट:onKeyPress
, किसी भी बटन प्रेस को रोकने के लिए जा रहा है, किसी भी बटन बैकस्पेस कुंजी सहित।
यह काम करता है क्योंकि बूलियन अभिव्यक्ति नए चरित्र अधिकतम लंबाई आप चाहते हैं में जोड़ा जाता है से पहले क्षेत्र की दूरी तुलना (इस उदाहरण में 50, यहाँ अपने खुद का उपयोग करें), और सच रिटर्न अगर वहाँ एक और के लिए कमरे, false
यदि नहीं है। अधिकांश घटनाओं से झूठी वापसी डिफ़ॉल्ट कार्रवाई को रद्द कर देती है। तो यदि वर्तमान लंबाई पहले से ही 50 (या अधिक) है, तो हैंडलर झूठा लौटाता है, KeyPress
कार्रवाई रद्द कर दी जाती है, और चरित्र जोड़ा नहीं जाता है। मरहम में
एक मक्खी एक TEXTAREA
, में चिपकाया जा करने की संभावना है जो KeyPress
ईवेंट सक्रिय करने का कारण नहीं है, इस चेक को धोखा है। इंटरनेट एक्सप्लोरर 5+ में onPaste
ईवेंट है जिसके हैंडलर में चेक हो सकता है। हालांकि, ध्यान दें कि आपको यह भी ध्यान में रखना चाहिए कि कितने वर्ण क्लिपबोर्ड में प्रतीक्षा कर रहे हैं यह जानने के लिए कि कुल पर जा रहा है या नहीं, आपको सीमा से अधिक लेना है या नहीं। सौभाग्य से, आईई में विंडो ऑब्जेक्ट से एक क्लिपबोर्ड ऑब्जेक्ट भी शामिल है। 1 इस प्रकार:
<textarea onKeyPress="return (this.value.length < 50);"
onPaste="return ((this.value.length +
window.clipboardData.getData('Text').length) < 50);"></textarea>
फिर, onPaste
घटना और clipboardData
वस्तु आईई ही कर रहे हैं 5 +। एक क्रॉस-ब्राउज़र समाधान के लिए, आपको लंबाई की जांच करने के लिए केवल OnChange
या OnBlur
हैंडलर का उपयोग करना होगा, और इसे संभालने के बावजूद इसे संभालना होगा (मान को चुपचाप हटाएं, उपयोगकर्ता को सूचित करें, आदि)। दुर्भाग्यवश, यह त्रुटि हो रही है क्योंकि यह हो रहा है, केवल तभी जब उपयोगकर्ता फ़ील्ड छोड़ने का प्रयास करता है, जो काफी अनुकूल नहीं है।
इसके अलावा, वहाँ यहाँ एक और तरीका है जो पूर्ण स्क्रिप्ट आप अपने पृष्ठ में शामिल हो सकते हैं शामिल है,:
http://cf-bill.blogspot.com/2005/05/textarea-maxlength-revisited.html
एचटीएमएल 5 अब maxlength
attribute on <textarea>
अनुमति देता है।
यह आईई < = 9 और आईओएस सफारी 8.4 को छोड़कर सभी ब्राउज़रों द्वारा समर्थित है। support table on caniuse.com देखें।
@erdomester यह समर्थित ब्राउज़र पर काम कर रहा है। आप प्रदान किए गए डब्ल्यू 3 सी लिंक में परीक्षण कर सकते हैं। – indusBull
मैंने इसे आजमाया और यह काम करता है भले ही मैंने maxlength = "500px" का उपयोग किया हो। लेकिन आपके द्वारा प्रदान किया गया लिंक निष्क्रिय था जब मैंने उस टिप्पणी को पोस्ट किया था और प्रदर्शित किया गया पृष्ठ था (मुझे लगता है) अब एक शो की तुलना में अन्य विशेषताओं को दिखा रहा है। – erdomester
वह लिंक डब्ल्यू 3 सी के लिए नहीं है, यह डब्ल्यू 3 स्कूल्स है, जो गलत जानकारी डालने के लिए जाना जाता है। – Toby
$(function(){
$("#id").keypress(function() {
var maxlen = 100;
if ($(this).val().length > maxlen) {
return false;
}
})
});
ध्यान दें कि onKeyPress समारोह ऊपर लिखा एक बार अक्षरों की सीमा मारा जाता है पाठ क्षेत्र में दर्ज किया जा रहा से किसी भी पाठ कर पाएगा - कोई वर्ण को नष्ट कर दिया जा सकता है। एक और मजबूत स्निपेट उपयोगकर्ता को अधिकतम सीमा को हिट करने और सीमा के नीचे पाठ प्राप्त करने के लिए अक्षरों को हटाने के लिए बैकस्पेस की अनुमति देगा। – shek
शायद यह सिर्फ मुझे और मेरी खराब अंकगणित है, लेकिन मुझे लगता है कि टेक्स्टरेस में नई लाइनों का उपयोग करते समय, आईई और एफएफ 'अधिकतम लम्बाई' के संबंध में क्रोम से भिन्न व्यवहार करते हैं। '\ R \ n' बनाम' \ n' समस्या (जब आपके टेक्स्ट में न्यूलाइन होती है) के साथ क्या करना है ... निश्चित रूप से, 'अधिकतम लम्बाई' मेरे अनुभव से विंडोज़ पर क्रॉस-ब्राउज़र-आईएसएच काम नहीं कर रहा है। .. लेकिन यहां कुछ भी नया नहीं है, वही पुरानी छोटी गाड़ी एचटीएमएल/जेएस सामान ... – user2173353