जावास्क्रिप्ट का उपयोग करके HTML में textArea पर अधिकतम गति कैसे लागू करें

Question

अगर मैं लिखता हूं तो मैं कुछ कार्यक्षमता रखना चाहूंगा

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

यह स्वचालित रूप से पाठ पर अधिकतम गति को थोप देगा। यदि संभव हो तो कृपया jQuery में समाधान प्रदान न करें।

नोट: अगर मैं ऐसा कुछ करता हूँ तो यह किया जा सकता है:

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

से नकल क्या सबसे अच्छा तरीका है एक HTML पाठ क्षेत्र पर एक HTML इनपुट "maxlength" विशेषता का अनुकरण करने की है?

लेकिन बात यह है कि मैं हर बार जब भी मैं एक textArea घोषित करता हूँ, onKeyPress और onKeyUp लिखना नहीं चाहता।

Comments

Textareas के लिए मैक्सिलम html5 में है। अभी यह क्रोम में काम करता है लेकिन फ़ायरफ़ॉक्स में नहीं।

— डेव

Answer 1

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

Comments

जोश ऐसा लगता है कि यह काम करेगा, लेकिन क्या आप यह बताएंगे कि यह चीज़ क्या करेगी --- --- (/ ^ [0-9] + $ /। परीक्षण (txts [i] .getAttribute ("maxlength"))) {। -

— राकेश जुयाल

मुझे लगता है कि मुझे याद है कि सौदा क्या है: या तो एफएफ या आईई (मुझे लगता है कि यह एफएफ है) एक अलग स्ट्रिंग लौटाता है जब जावास्क्रिप्ट "वैल्यू" विशेषता की जांच करता है कि यह फॉर्म पोस्ट होने पर सर्वर को वापस क्या भेजता है! यह कुछ के साथ क्या करना है कैसे हार्ड लाइन टूट जाता है / एक गाड़ी वापसी चरित्र सम्मिलित नहीं मिलता है। क्लाइंट और सर्वर पक्षों पर कुछ डिबग कोड के साथ यह पता लगाना आसान है।

— पोइंट्टी

मैंने अलर्ट के आदेश और मूल्य ट्रंकट को बंद कर दिया - मूल क्रम में, ऑनकीप अलर्ट करेगा, जिससे नियंत्रण पर ध्यान केंद्रित करना बंद हो जाएगा और ऑनब्लूर से आग लग जाएगी क्योंकि फ़ील्ड को अभी तक नहीं हटाया गया था।

— GalacticCowboy

@JoshStodola - onblurजब तक उपयोगकर्ता टैक्स्टेरिया से बाहर नहीं निकलता तब तक पेस्ट को हैंडल नहीं किया जाएगा। onkeyupसंदर्भ मेनू या ब्राउज़र मेनू के माध्यम से किए जाने पर पेस्ट को संभाल नहीं पाएंगे। यह दृष्टिकोण काम करता है यदि आपको पेस्ट के लिए स्क्रीन करने की आवश्यकता नहीं है। टाइमर आधारित दृष्टिकोण के लिए यह उत्तर देखें stackoverflow.com/a/10390626/1026459

— ट्रैविस जे

@ जोशस्टोडोला - वास्तव में आप नहीं कर सकते। यह वास्तव में मुझे एक उपयोगकर्ता के रूप में परेशान करेगा यदि मैंने एक textarea में कुछ का एक पूरा टुकड़ा चिपकाया था, सबमिट पर क्लिक किया, और केवल इसका कोई छोटा सा हिस्सा बिना किसी प्रतिक्रिया के गुजरता देखा।

— ट्रैविस जे

Answer 2

मुझे पता है कि आप jQuery से बचना चाहते हैं, लेकिन जैसे ही जावास्क्रिप्ट की आवश्यकता होती है, यह समाधान (jQuery 1.4 का उपयोग करना) सबसे अधिक सामान्य और मजबूत है।

से प्रेरित है, लेकिन दाना वुडमैन के जवाब में सुधार:

उस उत्तर से परिवर्तन इस प्रकार हैं: सरलीकृत और अधिक सामान्य, jQuery.live का उपयोग करना और यह भी निर्धारित नहीं करना चाहिए कि लंबाई ठीक है (IE में काम करने वाले तीर-कुंजियाँ और आईई में ध्यान देने योग्य स्पीडअप की ओर जाता है):

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

संपादित करें: jQuery के 1.7+ के लिए अपडेट किया गया संस्करण , onइसके बजाय का उपयोग कर रहा हैlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

Comments

नाइस एरिक, लाइव के उपयोग की तरह (इसके बारे में भूल गया!)।

— दाना वुडमैन

मैंने लाइव में कीड़े पाए () और jQuery ने इसे हटा दिया है। इसके बजाय पर () का उपयोग करें। आप परवाह क्यों हैं: britishdeveloper.co.uk/2012/04/...

— BritishDeveloper

लेकिन अगर वे बीच में संपादित हो गए, तो यह अंतिम चरित्र को मार देगा, नए चरित्र को नहीं, सही?

— जो मैबेल

हां () पर प्रयोग किया जाता है और यह एक रत्न की तरह काम करता है। धन्यवाद। यहाँ एक संशोधित और थोड़ा फिडेल ट्विस्ट किया गया है

— B-Money

स्लाइसिंग के साथ समस्या यह है कि यदि आप पात्रों को मध्य में प्रवेश करते हैं, तो उन्हें डाला जाता है और स्ट्रिंग को अंत से काट दिया जाता है। यदि एक बार में पूरा पाठ दिखाई नहीं दे रहा है, तो यह भ्रामक हो सकता है। मान बदलने के लिए वैल (..) फ़ंक्शन का उपयोग करके कर्सर को स्ट्रिंग के अंत तक ले जाना प्रतीत होता है। (यदि आप इन्हें आधुनिक ब्राउज़र के साथ फ़िडल में परीक्षण करना चाहते हैं, तो आपको अधिकतम गति को हटाने की आवश्यकता है - अन्यथा ब्राउज़र सीमा को लागू कर देगा)।

— जूहा पालोमाकी

Answer 3

अपडेट इरिक के समाधान का उपयोग करें .live()इसके बजाय इसका उपयोग करें क्योंकि यह थोड़ा अधिक मजबूत है।

---

भले ही आप एक समाधान चाहते थे जो jQuery का उपयोग नहीं कर रहा था, मैंने सोचा कि मैं इस पृष्ठ को Google के माध्यम से खोजने और jQuery-esque समाधान की तलाश में किसी को भी जोड़ूंगा:

$(function() {        
    // Get all textareas that have a "maxlength" property.
    $('textarea[maxlength]').each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field.
        var maxlength = $textarea.attr('maxlength');
        var val = $textarea.val();

        // Trim the field if it has content over the maxlength.
        $textarea.val(val.slice(0, maxlength));

        // Bind the trimming behavior to the "keyup" event.
        $textarea.bind('keyup', function() {
            $textarea.val($textarea.val().slice(0, maxlength));
        });

    });
});

आशा है कि आपके लिए उपयोगी है Googlers वहाँ ...

Comments

कीप बाउंड फंक्शन होना चाहिए: $ (यह) .val ($ (यह) .val।) (स्लाइस (0, अधिकतम गति));

— ब्रायन वेलेलुंगा

@ ब्रायन यूप, आप सही हैं। मेरी त्रुटि को ठीक करने के लिए धन्यवाद, नियत!

— डाना वुडमैन

$ (यह) .val (फ़ंक्शन (i, वैल) {रिटर्न वैल। एलिसिस (0, मैक्सलोप्रोसेसर)});

— दिमा बिल्डिन

यह स्निपेट अभी भी मददगार है क्योंकि लाइन फीड को ब्राउज़र में 1 वर्ण और सर्वर में 2 के रूप में गिना जाता है ...

— बेबो जूल

Answer 4

HTML5 तत्व में एक maxlengthविशेषता जोड़ता है textarea, जैसे:

<!DOCTYPE html>
<html>
    <body>
        <form action="processForm.php" action="post">
            <label for="story">Tell me your story:</label><br>
            <textarea id="story" maxlength="100"></textarea>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

यह वर्तमान में Chrome 13, FF 5 और Safari 5 में समर्थित है। आश्चर्यजनक रूप से, यह IE 9 में समर्थित नहीं है। (Win 7 के लिए परीक्षण किया गया)

Answer 5

यह समाधान IE में उस समस्या से बचा जाता है जहां पाठ के बीच में एक चरित्र को जोड़ने पर अंतिम वर्ण हटा दिया जाता है। यह अन्य ब्राउज़रों के साथ भी ठीक काम करता है।

$("textarea[maxlength]").keydown( function(e) {
    var key = e.which;  // backspace = 8, delete = 46, arrows = 37,38,39,40

    if ( ( key >= 37 && key <= 40 ) || key == 8 || key == 46 ) return;

    return $(this).val().length < $(this).attr( "maxlength" );
});

मेरा फ़ॉर्म सत्यापन तब किसी भी समस्या से संबंधित है जहां उपयोगकर्ता चिपकाया जा सकता है (केवल IE में एक समस्या लगती है) पाठ की अधिकतम लंबाई से अधिक पाठ होता है।

Answer 6

यह कुछ ट्विक कोड है जो मैं अभी अपनी साइट पर उपयोग कर रहा हूं। उपयोगकर्ता को शेष वर्णों की संख्या प्रदर्शित करने के लिए सुधार किया गया है।

(ओपी के लिए फिर से क्षमा करें जिन्होंने कोई jQuery का अनुरोध किया है। लेकिन गंभीरता से, जो इन दिनों jQuery का उपयोग नहीं करता है?)

$(function() {
    // Get all textareas that have a "maxlength" property.
    $("textarea[maxlength]").each(function() {

        // Store the jQuery object to be more efficient...
        var $textarea = $(this);

        // Store the maxlength and value of the field
        var maxlength = $textarea.attr("maxlength");

        // Add a DIV to display remaining characters to user
        $textarea.after($("<div>").addClass("charsRemaining"));

        // Bind the trimming behavior to the "keyup" & "blur" events (to handle mouse-based paste)
        $textarea.on("keyup blur", function(event) {
            // Fix OS-specific line-returns to do an accurate count
            var val = $textarea.val().replace(/\r\n|\r|\n/g, "\r\n").slice(0, maxlength);
            $textarea.val(val);
            // Display updated count to user
            $textarea.next(".charsRemaining").html(maxlength - val.length + " characters remaining");
        }).trigger("blur");

    });
});

अंतरराष्ट्रीय मल्टी-बाइट पात्रों के साथ परीक्षण नहीं किया गया है, इसलिए मुझे यकीन नहीं है कि यह उन लोगों के साथ कैसे काम करता है।

Answer 7

टेक्स्टारिया में चिपकाने से निपटने के लिए निम्नलिखित घटना भी जोड़ें:

...

txts[i].onkeyup = function() {
  ...
}

txts[i].paste = function() {
  var len = parseInt(this.getAttribute("maxlength"), 10);

  if (this.value.length + window.clipboardData.getData("Text").length > len) {
    alert('Maximum length exceeded: ' + len);
    this.value = this.value.substr(0, len);
    return false;
  }
}

...

Comments

क्या कोई इसे उत्तर निकाय में जोड़ सकता है अगर उन्हें लगता है कि यह ठीक है? अभी तक ऐसा करने के लिए पर्याप्त बिंदु नहीं हैं।

— स्टशरिन

पेस्ट फ़ंक्शन मानकीकृत नहीं है। मेरा मानना ​​है कि यह केवल IE में काम करता है।

— जोश स्टोडोला

मैंने पेस्ट स्थिति को संभालने के लिए अपना जवाब अपडेट किया। धन्यवाद!

— जोश स्टोडोला

Answer 8

इंटरनेट एक्सप्लोरर 10, फ़ायरफ़ॉक्स, क्रोम और सफारी में अधिकतम गति का समर्थन किया गया है।

नोट:<textarea> टैग की अधिकतम गति इंटरनेट एक्सप्लोरर 9 और पिछले संस्करणों में या ओपेरा में समर्थित नहीं है।

HTML से अधिकतम गति से w3schools.com विशेषता

IE8 या पूर्व संस्करणों के लिए आपको निम्नलिखित का उपयोग करना होगा

//only call this function in IE
function maxLengthLimit($textarea){
    var maxlength = parseInt($textarea.attr("maxlength"));
    //in IE7,maxlength attribute can't be got,I don't know why...
    if($.browser.version=="7.0"){
        maxlength = parseInt($textarea.attr("length"));
    }
    $textarea.bind("keyup blur",function(){
        if(this.value.length>maxlength){
            this.value=this.value.substr(0,maxlength);
        }
    });
}

पुनश्च

<input>टैग की अधिकतम गति सभी प्रमुख ब्राउज़रों में समर्थित है।

HTML से अधिकतम गति से w3schools.com विशेषता

Answer 9

टेक्सारिया के मूल्य को ट्रिम करने की तुलना में बेहतर समाधान।

$('textarea[maxlength]').live('keypress', function(e) {
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    if (val.length > maxlength) {
        return false;
    }
});

Answer 10

आप इसे आसान और स्पष्ट बनाने के लिए jQuery का उपयोग कर सकते हैं

JSFiddle डेमो

<textarea id="ta" max="10"></textarea>

<script>
$("#ta").keypress(function(e){

    var k = e.which==0 ? e.keyCode : e.which;
    //alert(k);
    if(k==8 || k==37 || k==39 || k==46) return true;

    var text      = $(this).val();
    var maxlength = $(this).attr("max");

    if(text.length >= maxlength) {
        return false;   
    }
    return true;
});
</script>

यह में परीक्षण किया जाता है Firefox, Google ChromeऔरOpera

Comments

मुझे डर है कि जब हैंडलर को निष्पादित किया जाता है, textतो इसे अपडेट किए जाने से पहले टेक्सारा के "मूल्य" से भर दिया जाता है। इसका मतलब है कि आपका टेस्ट होना चाहिए if( text.length +1 > maxlength) {return false;}। अन्यथा, कोई केवल maxlength - 1:/

— चर को

आपका फिडल उपयोगकर्ता को एक और चरित्र दर्ज करने देता है। IMO, आपका टेस्ट if(text.length+1 > maxlength)या तो होना चाहिए if(text.length >= maxlength)...

— Stphane

जब मैं कॉपी और सामग्री पेस्ट करता हूँ, तो यह अपेक्षित नहीं होता है

— रंजीत कुमार

Answer 11

ऊपर दिए गए कोड के साथ छोटी समस्या यह है कि वैल () परिवर्तन को ट्रिगर नहीं करता है () घटना, इसलिए यदि आप बैकबोन.जेएस (या मॉडल बाइंडिंग के लिए एक और फ्रेमवर्क) का उपयोग कर रहे हैं, तो मॉडल अपडेट नहीं किया जाएगा।

मैं समाधान पोस्ट कर रहा हूं मेरे लिए बहुत अच्छा काम किया।

$(function () {

    $(document).on('keyup', '.ie8 textarea[maxlength], .ie9 textarea[maxlength]', function (e) {
        var maxLength = $(this).attr('maxlength');
        if (e.keyCode > 47 && $(this).val().length >= maxLength) {
            $(this).val($(this).val().substring(0, maxLength)).trigger('change');
        }
        return true;
    });

});

Answer 12

मैंने हाल ही में maxlengthव्यवहार को कार्यान्वित किया textarea, और इस प्रश्न में वर्णित समस्या में चला गया: क्रोम मैक्लेराटिटी विशेषता के साथ textarea में गलत वर्णों को गिनता है ।

इसलिए यहां सूचीबद्ध सभी कार्यान्वयन थोड़ा छोटी गाड़ी का काम करेंगे। इस समस्या को हल करने के लिए मैं .replace(/(\r\n|\n|\r)/g, "11")पहले जोड़ देता हूं .length। और स्ट्रिंग को काटते समय इसे ध्यान में रखा।

मैं कुछ इस तरह से समाप्त हुआ:

var maxlength = el.attr("maxlength");
var val = el.val();
var length = val.length;
var realLength = val.replace(/(\r\n|\n|\r)/g, "11").length;
if (realLength > maxlength) {
    el.val(val.slice(0, maxlength - (realLength - length)));
}

सुनिश्चित करें कि यह पूरी तरह से समस्या हल करती है, लेकिन यह मेरे लिए अब काम करता है।

Answer 13

इस jQuery की कोशिश करें जो IE9, FF, Chrome में काम करता है और उपयोगकर्ताओं को एक उलटी गिनती प्रदान करता है:

$("#comments").bind("keyup keydown", function() {
    var max = 500;
    var value = $(this).val();
    var left = max - value.length;
    if(left < 0) {
        $(this).val( value.slice(0, left) );
        left = 0;
    }
    $("#charcount").text(left);
}); 

<textarea id="comments" onkeyup="ismaxlength(this,500)"></textarea>
<span class="max-char-limit"><span id="charcount">500</span> characters left</span>

Answer 14

इस कोड उदाहरण का उपयोग करने का प्रयास करें:

$("#TextAreaID1").bind('input propertychange', function () {
    var maxLength = 4000;
    if ($(this).val().length > maxLength) {
        $(this).val($(this).val().substring(0, maxLength));
    }
});

Answer 15

यह बहुत आसान है:

<textarea onKeyPress="return ( this.value.length < 1000 );"></textarea>

Comments

ध्यान दें कि यह समाधान पूरी तरह से दोहराया नहीं जाता है maxlengthक्योंकि आप इसमें तार चिपका सकते हैं जो वांछित लंबाई से अधिक लंबा हो।

— क्रिस बायर