सवाल एचटीएमएल टेक्स्टरेरा में अधिकतम लम्बाई सेट करें [डुप्लिकेट]


इस प्रश्न का उत्तर यहां दिया गया है:

मैं कैसे सेट कर सकता हूँ maxlength में textarea? और क्यों maxlength ठीक से काम नहीं कर रहा है textarea?


44
2017-12-16 10:19


मूल




जवाब:


एचटीएमएल 5 से पहले, हमारे पास एक आसान लेकिन व्यावहारिक तरीका है: सबसे पहले textarea तत्व में एक अधिकतम लम्बाई विशेषता सेट करें:

<textarea maxlength='250' name=''></textarea>  

फिर उपयोगकर्ता इनपुट को सीमित करने के लिए जावास्क्रिप्ट का उपयोग करें:

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

सुनिश्चित करें कि दोनों "इनपुट" तथा "propertychange"यह फ़ायरफ़ॉक्स / सफारी और आईई जैसे विभिन्न ब्राउज़रों पर काम करने के लिए घटनाओं।


88
2017-08-26 15:49



एचटीएमएल 5 का उपयोग करने का रिज़ॉर्ट एक जवाब नहीं है। हम क्रॉस-ब्राउज़र समर्थन की अपेक्षा करते हैं। यह अब तक का सबसे सही जवाब देता है। - 3Dom
ध्यान दें कि यह समाधान "शुद्ध" जावास्क्रिप्ट नहीं है, इसके लिए JQuery का उपयोग करने की आवश्यकता है। (यदि आप JQuery के बिना इसे आज़माते हैं, और आश्चर्य करते हैं कि यह क्यों काम नहीं करता है।) - Frédéric
दुर्भाग्य से यह textarea में किसी भी नई लाइन के लिए उम्मीद के रूप में काफी काम नहीं करता है। मैं अनुमान लगा रहा हूं कि जावास्क्रिप्ट दो की बजाय एक चरित्र के रूप में एक नई रेखा का इलाज कर रहा है, इसलिए जब मैं डेटाबेस में "अधिकतम लंबाई" स्ट्रिंग डालने का प्रयास करता हूं तो मुझे एक त्रुटि मिलती है। - Coxy
मैं गलत हो सकता हूं, लेकिन अगर मैं एक छोटी सी कहानी लिख रहा हूं, और टेक्स्ट बॉक्स की शुरुआत में टेक्स्ट डालने वाला हूं, तो पाठ के अंत को टाइप करने के बाद कटा हुआ हो जाएगा। संभवतः मेरे ज्ञान के बिना। - David Gilbertson
@ 3 डीओएम: "एचटीएमएल 5 का उपयोग करने का रिज़ॉर्टिंग उत्तर नहीं है।" - एचटीएमएल 5 doctype का उपयोग करना है समर्थित क्रॉस-ब्राउजर (उन्होंने पुराने ब्राउज़र में क्या काम किया है यह देखने के लिए विभिन्न सिद्धांतों का परीक्षण किया), और एचटीएमएल 5 में पेश की गई एक विशेषता का उपयोग उन ब्राउज़र के लिए जावास्क्रिप्ट फ़ॉलबैक के साथ किया गया है जो इसका समर्थन नहीं करते हैं, क्रॉस-ब्राउज़र भी संगत है। - Paul D. Waite


यदि आप एचटीएमएल 5 का उपयोग कर रहे हैं, तो आपको इसे निर्दिष्ट करना होगा DOCTYPE घोषणा।

एक मान्य एचटीएमएल 5 दस्तावेज़ के लिए, इसे शुरू करना चाहिए:

<!DOCTYPE html>

एचटीएमएल 5 से पहले, textarea तत्व में कोई नहीं था maxlength विशेषता।

आप इसे देख सकते हैं DTD / कल्पना:

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  %reserved;                           -- reserved for possible future use --
  >

ए में टाइप किए गए वर्णों की संख्या को सीमित करने के लिए textarea, आपको जावास्क्रिप्ट का उपयोग करने की आवश्यकता होगी onChange घटना। फिर आप पात्रों की संख्या गिन सकते हैं और आगे टाइपिंग को अस्वीकार कर सकते हैं।

यहाँ टेक्स्ट इनपुट पर गहन चर्चा है और आकार को सीमित करने के लिए सर्वर और क्लाइंट साइड स्क्रिप्टिंग का उपयोग कैसे करें।

यहाँ एक और नमूना है।


16
2017-12-16 10:21





एचटीएमएल 4 में टेक्स्टरेरा के लिए अधिकतम लम्बाई करने का सरल तरीका है:

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

हालांकि आप चाहते हैं कि कई पात्रों के लिए "100" बदलें


9
2017-12-19 18:07



पेस्टरी में टेक्स्ट जोड़ने के लिए टाइप करने के अलावा अन्य तरीके हैं, जैसे पेस्ट करना। यह समाधान शायद उनके लिए काम नहीं करता है। - Frédéric
न केवल, यह आपके अधिकतम आकार से अधिक संख्या में पेस्ट या लोड होने के बाद वर्णों को मिटाने से रोक देगा (आपको माउस के साथ चयन करना और कट करना होगा ...)। - Andrea Ligios
इन प्रतिबंधों को लागू करने के बारे में इनलाइन जावास्क्रिप्ट इवेंट बाध्यकारी भी सबसे अर्थपूर्ण तरीका नहीं है। - Evin Ugur
इस समाधान के बारे में एक और मुद्दा, यदि चरित्र गणना सीमित हो गई है, तो अब भी कीबोर्ड का उपयोग करने का कोई तरीका नहीं है backspace - Mehdi Dehghani


जैसा कि मैंने अक्विंग्सओ के जवाब पर एक टिप्पणी में कहा था, यह काफी काम नहीं करता है textarea कम से कम विंडोज़ पर, न्यूलाइन अक्षर हैं।

मैंने अपना जवाब थोड़ा बदल दिया है:

$(function() {
    $("textarea[maxlength]").bind('input propertychange', function() {
        var maxLength = $(this).attr('maxlength');
        //I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
        //Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
        var newlines = ($(this).val().match(/\n/g) || []).length
        if ($(this).val().length + newlines > maxLength) {
            $(this).val($(this).val().substring(0, maxLength - newlines));
        }
    })
});

अब जब मैं न्यूलाइन के साथ बहुत सारे डेटा पेस्ट करने का प्रयास करता हूं, तो मुझे बिल्कुल सही संख्या में वर्ण मिलते हैं।


7
2018-05-14 06:06





$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
    if ($(this).val().length > maxlen) {  
      return false;
    }  
  })
});  

1
2017-10-17 02:53





एचटीएमएल 5 से पहले जावास्क्रिप्ट या सर्वर-साइड सत्यापन के साथ यह जांचना संभव है (बेहतर, क्योंकि जावास्क्रिप्ट स्पष्ट रूप से केवल जावास्क्रिप्ट सक्षम के साथ काम करता है ...)। Textareas के लिए कोई मूल अधिकतम लंबाई विशेषता नहीं है।

एचटीएमएल 5 के बाद से यह वैध विशेषता है, इसलिए एचटीएमएल 5 के रूप में अपने डॉक्टरेट को परिभाषित करने में मदद मिल सकती है। मुझे नहीं पता कि सभी ब्राउज़र इस विशेषता का समर्थन करते हैं, हालांकि:

<!DOCTYPE html>

0
2017-12-16 10:26





इसे इस्तेमाल करे

$(function(){
  $("textarea[maxlength]")
    .keydown(function(event){
       return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
    })
    .keyup(function(event){
      var limit = $(this).attr("maxlength");

      if (!limit) return;

      if (this.value.length <= limit) return true;
      else {
        this.value = this.value.substr(0,limit);
        return false;
      }    
    });
});

मेरे लिए अतिरिक्त पात्रों को कूदने / दिखाने के बिना वास्तव में सही काम करता है; इनपुट पर अधिकतम लम्बाई की तरह काम करता है


0
2017-10-11 11:19



यह सभी ब्राउज़रों में ठीक से काम नहीं करेगा। हार्ड न्यूलाइन इन <textarea> तत्व फ़ायरफ़ॉक्स और वेबकिट में ठीक से गिने गए नहीं हैं (या नहीं थे; वे इसे ठीक कर सकते हैं)। हार्ड न्यूलाइन होना चाहिए प्रेषित एक सीआर-एलएफ जोड़ी (प्रति spec) के रूप में, लेकिन फ़ायरफ़ॉक्स और वेबकिट कठोर न्यूलाइन को केवल 1 वर्ण के रूप में गिनती है। - Pointy


<p>
   <textarea id="msgc" onkeyup="cnt(event)" rows="1" cols="1"></textarea> 
</p> 
<p id="valmess2" style="color:red" ></p>

function cnt(event)
{ 
 document.getElementById("valmess2").innerHTML=""; // init and clear if b < max     
allowed character 

 a = document.getElementById("msgc").value; 
 b = a.length; 
 if (b > 400)
  { 
   document.getElementById("valmess2").innerHTML="the max length of 400 characters is 
reached, you typed in  " + b + "characters"; 
  } 
}

अधिकतम लम्बाई केवल HTML5 के लिए मान्य है। एचटीएमएल / एक्सएचटीएमएल के लिए आपको जावास्क्रिप्ट और / या PHP का उपयोग करना होगा। PHP के साथ आप उदाहरण के लिए स्ट्रेल का उपयोग कर सकते हैं। यह उदाहरण केवल अधिकतम लंबाई इंगित करता है, यह इनपुट को अवरुद्ध नहीं कर रहा है।


0
2017-11-05 18:20





आकार बदलने: कोई नहीं; यह संपत्ति आपके टेक्स्ट क्षेत्र को ठीक करती है और इसे बाध्य करती है। आप इस css प्रॉपर्टी आईडी का उपयोग अपने textarea.gave टेक्स्ट एरिया को एक आईडी और उस आईडी की ओर से आप इस सीएसएस प्रॉपर्टी का उपयोग कर सकते हैं।


-1
2018-06-15 08:13