কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএলে টেক্সটআরিয়ায় সর্বোচ্চতা আরোপ করা যায় imp

Question

আমি কিছু কার্যকারিতা রাখতে চাই যা দ্বারা যদি আমি লিখি

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

এটি স্বয়ংক্রিয়ভাবে পাঠ্যআরিয়ায় সর্বোচ্চতা চাপিয়ে দেবে imp যদি সম্ভব হয় তবে 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" অ্যাট্রিবিউট অনুকরণ হয়?

তবে মুল বক্তব্যটি হ'ল আমি প্রতিবার আমি কোনও পাঠ্যআরিয়া ঘোষনা করে অন কিরীপস এবং অনকায়াপ লিখতে চাই না।

Comments

টেক্সারিয়াসের জন্য সর্বোচ্চটি এইচটিএমএল 5 এ রয়েছে। এখনই এটি ক্রোমে কাজ করে তবে ফায়ারফক্সে নয়।

— ডেভ

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 ("সর্বোচ্চ দৈর্ঘ্য"))) {- -

— রকেশ জুয়াল

আমি মনে করি আমি মনে করি চুক্তিটি কী: এফএফ বা আইই (আমি মনে করি এটি এফএফ) ফর্ম পোস্ট হওয়ার সাথে সাথে জাভাস্ক্রিপ্টটি "মান" বৈশিষ্ট্যটি যা সার্ভারে ফেরত পাঠায় তার চেয়ে বেশি পরীক্ষা করে যখন আলাদা স্ট্রিং দেয়! হার্ড লাইন বিরতি কীভাবে করে / ক্যারেজ রিটার্ন অক্ষর sertedোকানো হয় না তার সাথে এর কিছু করার আছে। ক্লায়েন্ট এবং সার্ভারের দিকগুলির কিছু ডিবাগ কোড সহ এটি নির্ধারণ করা সহজ।

— পয়েন্টি

আমি সতর্কতার ক্রম এবং মান কেটে ফেলেছি - মূল ক্রমে, অনকিপ সতর্কতা অবলম্বন করবে, যার ফলে নিয়ন্ত্রণটি ফোকাস হারাবে এবং মাঠটি এখনও কাটা হয়নি।

— গ্যালাকটিক কাউয়য়

@ জোস্টস্টোডোলা - onblurব্যবহারকারী টেক্সারিয়া থেকে ক্লিক না করা পর্যন্ত পেস্টটি পরিচালনা করবেন না। onkeyupযদি প্রসঙ্গ মেনু বা ব্রাউজার মেনুয়ের মাধ্যমে করা হয় তবে পেস্টটি পরিচালনা করবে না। এই পন্থাটি যদি আপনার পেস্টের জন্য স্ক্রিন করার প্রয়োজন না হয় তবে কাজ করে। এই উত্তরটি টাইমার ভিত্তিক পদ্ধতির জন্য দেখুন stackoverflow.com/a/10390626/1026459

— ট্র্যাভিস জে

@ জোস্টস্টোডোলা - আসলে আপনি পারবেন না। এটি আমি ব্যবহারকারী হিসাবে সত্যিই আমাকে বিরক্ত করব যদি আমি কোনও টেক্সারিয়ার কোনও পুরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো করে ফেলেছিলাম।

— ট্র্যাভিস জে

Answer 2

আমি জানি আপনি jQuery এড়াতে চান, তবে সমাধানটির জাভাস্ক্রিপ্টের প্রয়োজন হওয়ায় এই সমাধানটি (jQuery 1.4 ব্যবহার করে) সর্বাধিক কনসাইজ এবং মজবুত।

দ্বারা অনুপ্রাণিত, কিন্তু ডানা উডম্যান এর উত্তর চেয়ে উন্নতি:

উত্তরটি থেকে পরিবর্তনগুলি হ'ল: সরল ও আরও জেনেরিক, jQuery.live ব্যবহার করে এবং দৈর্ঘ্য ঠিক থাকলে ভাল স্থাপন না করা (আইই তে তীরচিহ্নগুলি কাজ করে, এবং আইই তে লক্ষণীয় স্পিডআপ):

// 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+ এর জন্য আপডেট হওয়া সংস্করণonlive

// 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

লাইভের ব্যবহারের মতো সুন্দর ইরিক (এটি ভুলে গেছেন!)।

— ডানা উডম্যান

আমি লাইভ () এবং বাগের মধ্যে বাগগুলি পেয়েছি এবং এর পর থেকে এটি হ্রাস পেয়েছে। পরিবর্তে () ব্যবহার করুন। আপনি যদি যত্ন করে থাকেন তবে: ব্রিটিশডিভলপার.কম.২০

— ব্রিটিশ ডেভেলপার

তবে তারা যদি মাঝখানে সম্পাদনা করে, তবে এটি শেষ চরিত্রটিকে হত্যা করবে, নতুন চরিত্রটি নয়, তাই না?

— জো মাবেল

হ্যাঁ ব্যবহৃত () এবং এটি একটি রত্নের মতো কাজ করে। ধন্যবাদ। এখানে একটি পরিবর্তিত এবং সামান্য কিছুটা ট্যুইড রয়েছে

— বি-মানি

স্লাইসিংয়ের সমস্যাটি হ'ল আপনি যদি মাঝখানে অক্ষরগুলি প্রবেশ করান তবে সেগুলি সন্নিবেশ করা হয় এবং স্ট্রিংটি শেষ থেকে কাটা হয়। পুরো লেখাটি একবারে দৃশ্যমান না হলে এটি বিভ্রান্তিকর হতে পারে। মান পরিবর্তন করতে ভাল (..) ফাংশনটি ব্যবহার করে কার্সারটিকে স্ট্রিংয়ের শেষের দিকে সরিয়ে নেওয়া হয় বলে মনে হয়। (আপনি যদি আধুনিক ব্রাউজারের সাথে এইগুলিকে ফ্রেডে পরীক্ষা করতে চান তবে আপনাকে সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যটি সরিয়ে ফেলতে হবে - অন্যথায় ব্রাউজারটি সীমাবদ্ধতা প্রয়োগ করবে)।

— জুহা Palomäki

Answer 3

আপডেটটি এরিকের সমাধানটি .live()পরিবর্তে ব্যবহার করুন কারণ এটি কিছুটা বেশি দৃ .়।

---

যদিও আপনি এমন কোনও সমাধান চেয়েছিলেন যা jQuery ব্যবহার না করে, আমি ভেবেছিলাম যে গুগলের মাধ্যমে এই পৃষ্ঠাটি খুঁজে পেতে এবং 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));
        });

    });
});

আশা করি এটি গুগলারের জন্য আপনার পক্ষে কার্যকর ...

Comments

কীআপ সীমাবদ্ধ ফাংশনটি হ'ল: $ (এটি) .ভাল ($ (এটি) .ভাল ()। স্লাইস (0, সর্বোচ্চ দৈর্ঘ্য));

— ব্রায়ান ভাললুঙ্গা

@ ব্রায়ান ইয়ুপ, আপনি সঠিক আমার ত্রুটি চিহ্নিত করার জন্য ধন্যবাদ, স্থির!

— ডানা উডম্যান

this (এটি) .ভ্যাল (ফাংশন (i, ভাল) {রিটার্ন Val.slice (0, সর্বোচ্চ দৈর্ঘ্য)});

— দিমা বিল্ডিন

এই স্নিপেটটি এখনও সহায়ক কারণ লাইন ফিডগুলি ব্রাউজারে 1 টি অক্ষর এবং সার্ভারের 2 হিসাবে গণ্য করা হয় ...

— bebbo

Answer 4

এইচটিএমএল 5 উপাদানটির মতো একটি 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>

এটি বর্তমানে ক্রোম 13, এফএফ 5 এবং সাফারি 5 এ সমর্থিত surpris. অবাক হওয়ার মতো বিষয় নয়, এটি আইই 9 তে সমর্থিত নয় (

Answer 5

এই সমাধানটি আইই-তে সমস্যাটি এড়িয়ে যায় যেখানে পাঠ্যের মাঝখানে একটি অক্ষর যুক্ত করা হলে শেষ অক্ষরটি সরিয়ে ফেলা হয়। এটি অন্যান্য ব্রাউজারগুলির সাথেও দুর্দান্ত কাজ করে।

$("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" );
});

আমার ফর্মের বৈধতাটি এমন কোনও সমস্যার সাথে মোকাবিলা করে যেখানে ব্যবহারকারী আটকাতে পারে (কেবলমাত্র আইইতে সমস্যা বলে মনে হচ্ছে) পাঠ্যটির সর্বাধিক দৈর্ঘ্য ছাড়িয়ে।

Answer 6

এটি এমন কিছু টুইট কোড যা আমি কেবলমাত্র আমার সাইটে ব্যবহার করছি। ব্যবহারকারীর কাছে অবশিষ্ট অক্ষরের সংখ্যা প্রদর্শন করতে উন্নত করা হয়েছে।

(ওপিকে আবার দুঃখিত, যিনি কোন জিকুয়েরির জন্য অনুরোধ করেন নি। তবে গুরুতর বিষয়, আজকাল কে 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

কেউ যদি ঠিক মনে করে উত্তর বডিটিতে এটি যুক্ত করতে পারে? এটি করার পর্যাপ্ত পয়েন্ট নেই।

— স্টুশারউইন

পেস্ট ফাংশন মানক করা হয় না। আমি বিশ্বাস করি এটি কেবল আইই তে কাজ করে।

— জোশ স্টোডোলা

আমি পেস্টের পরিস্থিতি পরিচালনা করতে আমার উত্তর আপডেট করেছি। ধন্যবাদ!

— জোশ স্টোডোলা

Answer 8

সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যটি ইন্টারনেট এক্সপ্লোরার 10, ফায়ারফক্স, ক্রোম এবং সাফারিতে সমর্থিত।

দ্রষ্টব্য: ট্যাগটির সর্বাধিক দৈর্ঘ্যের বৈশিষ্ট্যটি <textarea>ইন্টারনেট এক্সপ্লোরার 9 এবং পূর্ববর্তী সংস্করণগুলিতে বা অপেরাতে সমর্থিত নয়।

থেকে এইচটিএমএল MAXLENGTH অ্যাট্রিবিউট w3schools.com

আইই 8 বা পূর্ববর্তী সংস্করণগুলির জন্য আপনাকে নিম্নলিখিতগুলি ব্যবহার করতে হবে

//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>ট্যাগের সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যটি সমস্ত বড় ব্রাউজারগুলিতে সমর্থিত।

থেকে এইচটিএমএল MAXLENGTH অ্যাট্রিবিউট 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 এটি সহজ এবং স্পষ্ট করতে ব্যবহার করতে পারেন

জেএসফিডাল ডেমো

<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ভিতরে ভিতরে চরগুলি রাখতে সক্ষম হবে:/

— স্টাফেন

আপনার ফিডাল ব্যবহারকারীকে আরও একটি চরিত্র প্রবেশ করতে দেয়। আইএমও, আপনার পরীক্ষাটি হয় if(text.length+1 > maxlength)বা হওয়া উচিত if(text.length >= maxlength)...

— স্টাফেন

আমি কন্টেন্টটি অনুলিপি করে আটকানোর সময় এটি প্রত্যাশার মতো কাজ করছে না

— রঞ্জিত কুমার

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এবং এই প্রশ্নটিতে বর্ণিত সমস্যাটিতে চলেছি : ক্রোম সর্বোচ্চ দৈর্ঘ্যের বৈশিষ্ট্যযুক্ত টেক্সারিয়ায় অক্ষরকে ভুল হিসাবে গণ্য করে ।

সুতরাং এখানে তালিকাভুক্ত সমস্ত বাস্তবায়ন সামান্য বগী কাজ করবে। এই সমস্যাটি সমাধান করার জন্য আমি .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 ব্যবহার করে দেখুন যা আইই 9, এফএফ, ক্রোমে কাজ করে এবং ব্যবহারকারীদের একটি গণনা সরবরাহ করে:

$("#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কারণ আপনি পছন্দসই দৈর্ঘ্যের চেয়ে দীর্ঘতর স্ট্রিংগুলিতে পেস্ট করতে পারেন।

— ক্রিস বিয়ার