วิธีกำหนด maxlength บน textArea ใน HTML โดยใช้ JavaScript

116

ฉันต้องการฟังก์ชั่นบางอย่างที่ถ้าฉันเขียน

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

มันจะกำหนดความยาวสูงสุดบน 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))
}

คัดลอกมาจากวิธีใดเป็นวิธีที่ดีที่สุดในการจำลองแอตทริบิวต์ "maxlength" อินพุต HTML บนพื้นที่ข้อความ HTML

แต่ประเด็นคือฉันไม่ต้องการเขียน onKeyPress และ onKeyUp ทุกครั้งที่ฉันประกาศ textArea

javascript html textarea

— Rakesh Juyal
แหล่งที่มา

4

maxlenth สำหรับ textareas อยู่ใน html5 ตอนนี้ใช้งานได้ใน Chrome แต่ไม่ใช่ Firefox

— Dave

113

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;
    } 
  };

}

— Josh Stodola
แหล่งที่มา

3

Josh ดูเหมือนว่ามันจะใช้งานได้ แต่คุณช่วยอธิบายได้ไหมว่าสิ่งนี้จะทำอย่างไร --- if (/ ^ [0-9] + $ /. test (txts [i] .getAttribute ("maxlength"))) {- -

— Rakesh Juyal

2

ฉันคิดว่าฉันจำได้ว่าดีลคืออะไร: FF หรือ IE (ฉันคิดว่ามันเป็น FF) ส่งคืนสตริงที่แตกต่างกันเมื่อ Javascript ตรวจสอบแอตทริบิวต์ "value" กว่าที่ส่งกลับไปยังเซิร์ฟเวอร์เมื่อโพสต์แบบฟอร์ม! มันมีบางอย่างที่เกี่ยวข้องกับการแบ่งบรรทัดยากทำอย่างไร / ไม่ได้ใส่อักขระส่งคืนแคร่ เป็นเรื่องง่ายที่จะหารหัสดีบักในฝั่งไคลเอ็นต์และเซิร์ฟเวอร์

— Pointy

7

ฉันเปลี่ยนลำดับของการแจ้งเตือนและการตัดทอนค่า - ตามลำดับเดิมออนคีย์จะแจ้งเตือนทำให้การควบคุมสูญเสียโฟกัสและออนเบลอจะเริ่มทำงานเนื่องจากยังไม่ได้ตัดฟิลด์

— GalacticCowboy

1

@JoshStodola - onblurจะไม่จัดการการวางจนกว่าผู้ใช้จะคลิกออกจากพื้นที่ข้อความ onkeyupจะไม่จัดการการวางหากทำผ่านเมนูบริบทหรือเมนูเบราว์เซอร์ วิธีนี้ใช้ได้ผลหากคุณไม่จำเป็นต้องคัดกรองเพื่อวาง ดูคำตอบนี้สำหรับวิธีการจับเวลาstackoverflow.com/a/10390626/1026459

— Travis J

3

@ JoshStodola - แน่นอนคุณทำไม่ได้ มันจะรบกวนฉันในฐานะผู้ใช้จริงๆถ้าฉันวางบางสิ่งบางอย่างลงใน textarea คลิกส่งและเห็นเพียงส่วนเล็ก ๆ ที่ผ่านไปโดยไม่มีการตอบสนองใด ๆ

— Travis J

80

ฉันรู้ว่าคุณต้องการหลีกเลี่ยง jQuery แต่เนื่องจากโซลูชันต้องใช้ JavaScript โซลูชันนี้ (โดยใช้ jQuery 1.4) จึงปลอดภัยและมีประสิทธิภาพมากที่สุด

แรงบันดาลใจจาก แต่การปรับปรุงคำตอบของ Dana Woodman:

การเปลี่ยนแปลงจากคำตอบนั้นคือ: ง่ายและทั่วไปมากขึ้นโดยใช้ jQuery.live และไม่ได้ตั้งค่า val หากความยาวตกลง (นำไปสู่ปุ่มลูกศรที่ใช้งานได้ใน IE และการเร่งความเร็วที่สังเกตได้ใน 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));
    }
});

— Eirik W.
แหล่งที่มา

1

Nice Eirik ชอบการใช้สด (ลืมไปแล้ว!)

— Dana Woodman

5

ฉันพบข้อบกพร่องใน live () และ jQuery ได้เลิกใช้งานแล้ว ใช้บน () แทน ถ้าคุณสนใจเหตุผล: britishdeveloper.co.uk/2012/04/…

— BritishDeveloper

6

แต่ถ้าแก้ไขตรงกลางนี่จะเป็นการฆ่าตัวละครสุดท้ายไม่ใช่ตัวละครใหม่ใช่ไหม?

— Joe Mabel

6

ใช่ใช้กับ () และใช้งานได้เหมือนอัญมณี ขอขอบคุณ นี่คือการปรับแต่งและปรับแต่งเล็กน้อย: jsfiddle.net/nXMqc

— B-Money

6

ปัญหาในการแบ่งส่วนคือถ้าคุณป้อนอักขระตรงกลางอักขระจะถูกแทรกและสตริงจะถูกตัดออกจากจุดสิ้นสุด หากมองไม่เห็นข้อความทั้งหมดในคราวเดียวอาจทำให้สับสนได้ นอกจากนี้การใช้ฟังก์ชัน val (.. ) เพื่อเปลี่ยนค่าดูเหมือนว่าจะเลื่อนเคอร์เซอร์ไปที่จุดสิ้นสุดของสตริง (หากคุณต้องการทดสอบสิ่งเหล่านี้ด้วยเบราว์เซอร์ที่ทันสมัยในซอคุณต้องลบแอตทริบิวต์ maxlength มิฉะนั้นเบราว์เซอร์จะบังคับใช้ขีด จำกัด )

— Juha Palomäki

33

อัปเดตใช้โซลูชันของ Eirik โดยใช้.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));
        });

    });
});

หวังว่าจะเป็นประโยชน์สำหรับคุณชาว Google ที่นั่น ...

— Dana Woodman
แหล่งที่มา

1

ฟังก์ชันขอบเขตการกดแป้นควรเป็น: $ (this) .val ($ (this) .val (). slice (0, maxlength));

— Brian Vallelunga

@brian Yup คุณถูกต้อง ขอบคุณสำหรับการระบุข้อผิดพลาดของฉันแก้ไขแล้ว!

— Dana Woodman

$ (this) .val (function (i, val) {return val.slice (0, maxlength)});

— Dima Bildin

ตัวอย่างข้อมูลนี้ยังคงมีประโยชน์เนื่องจากฟีดบรรทัดจะนับเป็น 1 อักขระในเบราว์เซอร์และ 2 ตัวในเซิร์ฟเวอร์ ...

— bebbo

32

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)

— james.garriss
แหล่งที่มา

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 เท่านั้น) ข้อความเกินความยาวสูงสุดของพื้นที่ข้อความ

— คริสอาร์
แหล่งที่มา

4

นี่คือโค้ดที่ปรับแต่งบางส่วนที่ฉันเพิ่งใช้ในไซต์ของฉัน ได้รับการปรับปรุงเพื่อแสดงจำนวนอักขระที่เหลือให้กับผู้ใช้

(ขออภัยอีกครั้งกับ OP ที่ไม่ขอ 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");

    });
});

ยังไม่ได้รับการทดสอบด้วยอักขระหลายไบต์สากลดังนั้นฉันไม่แน่ใจว่ามันใช้งานได้อย่างไร

— ไซมอนตะวันออก
แหล่งที่มา

2

เพิ่มเหตุการณ์ต่อไปนี้เพื่อจัดการกับการวางลงใน textarea:

...

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;
  }
}

...

— stusherwin
แหล่งที่มา

มีใครสามารถเพิ่มสิ่งนี้ลงในเนื้อหาคำตอบได้หรือไม่ถ้าพวกเขาคิดว่ามันโอเค ยังไม่มีคะแนนเพียงพอที่จะทำเช่นนั้น

— stusherwin

ฟังก์ชันวางไม่ได้มาตรฐาน ฉันเชื่อว่ามันใช้ได้เฉพาะใน IE

— Josh Stodola

ฉันอัปเดตคำตอบเพื่อจัดการกับสถานการณ์การวาง ขอบคุณ!

— Josh Stodola

2

แอตทริบิวต์ maxlength ได้รับการสนับสนุนใน Internet Explorer 10, Firefox, Chrome และ Safari

หมายเหตุ:แอตทริบิวต์ maxlength ของ<textarea>แท็กไม่ได้รับการสนับสนุนใน Internet Explorer 9 และเวอร์ชันก่อนหน้าหรือใน Opera

จากHTML maxlength Attribute 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);
        }
    });
}

PS

แอตทริบิวต์ maxlength ของ<input>แท็กได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด

จากHTML maxlength Attribute w3schools.com

— อีซึ่น
แหล่งที่มา

1

โซลูชันที่ดีกว่าเมื่อเทียบกับการตัดทอนค่าของพื้นที่ข้อความ

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

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

— สาธารณรัฐอินเดีย
แหล่งที่มา

1

คุณสามารถใช้ jQuery เพื่อทำให้ง่ายและชัดเจน

JSFiddle DEMO

<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

— MaxEcho
แหล่งที่มา

ฉันกลัวว่าเมื่อดำเนินการตัวจัดการจะtextเต็มไปด้วย "ค่า" ของเท็กซัสก่อนที่จะมีการอัปเดต if( text.length +1 > maxlength) {return false;}ซึ่งหมายความว่าการทดสอบของคุณควรจะ มิฉะนั้นจะสามารถใส่maxlength - 1ตัวอักษรด้านในได้เท่านั้น:/

— Stphane

ซอของคุณให้ผู้ใช้ป้อนอักขระได้อีกหนึ่งตัว IMO การทดสอบของคุณควรเป็นif(text.length+1 > maxlength)หรือif(text.length >= maxlength)...

— Stphane

มันไม่ทำงานตามที่คาดไว้เมื่อฉันคัดลอกและวางเนื้อหา

— Ranjit Kumar

0

ปัญหาเล็กน้อยเกี่ยวกับโค้ดด้านบนคือ val () ไม่ทริกเกอร์เหตุการณ์ change () ดังนั้นหากคุณใช้ backbone.js (หรือเฟรมเวิร์กอื่นสำหรับการเชื่อมโมเดล) โมเดลจะไม่ได้รับการอัปเดต

ฉันโพสต์วิธีแก้ปัญหาได้ผลดีสำหรับฉัน

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

});

— Alexander Beletsky
แหล่งที่มา

0

ฉันใช้maxlengthพฤติกรรมเมื่อtextareaเร็ว ๆ นี้และพบปัญหาที่อธิบายไว้ในคำถามนี้: Chrome นับอักขระผิดใน 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)));
}

ไม่แน่ใจว่าจะแก้ปัญหาได้อย่างสมบูรณ์หรือไม่ แต่ตอนนี้ใช้ได้กับฉัน

— โรมันโพมินอฟ
แหล่งที่มา

0

ลองใช้ 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>

— เลสลี่คิง
แหล่งที่มา

0

ลองใช้ตัวอย่างโค้ดนี้:

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

— Naveen
แหล่งที่มา

-1

ง่ายกว่ามาก:

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

ขยายข้อมูลโค้ด

— erdomester
แหล่งที่มา

2

โปรดทราบว่าโซลูชันนี้ไม่สามารถทำซ้ำได้ทั้งหมดmaxlengthเนื่องจากคุณสามารถวางสตริงที่ยาวกว่าความยาวที่ต้องการได้

— Chris Bier