Cara memaksakan maxlength pada textArea dalam HTML menggunakan JavaScript

116

Saya ingin memiliki beberapa fungsi yang digunakan jika saya menulis

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

secara otomatis akan memaksakan maxlength pada textArea. Jika memungkinkan jangan berikan solusi di jQuery.

Catatan: Ini bisa dilakukan jika saya melakukan sesuatu seperti ini:

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

Disalin dari Apa cara terbaik untuk meniru atribut input HTML "maxlength" pada textarea HTML?

Tetapi intinya adalah saya tidak ingin menulis onKeyPress dan onKeyUp setiap kali saya mendeklarasikan textArea.

javascript html textarea Rakesh Juyal
sumber

4

maxlenth untuk textareas ada di html5. Sekarang ini berfungsi di Chrome tetapi bukan 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
sumber

3

Josh tampaknya itu akan berhasil tetapi tolong jelaskan apa yang akan dilakukan hal ini --- if (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

Rakesh Juyal

2

Saya pikir saya ingat apa kesepakatannya: baik FF atau IE (saya pikir itu FF) mengembalikan string yang berbeda ketika Javascript memeriksa atribut "nilai" daripada apa yang dikirimkan kembali ke server ketika formulir diposting! Ini ada hubungannya dengan bagaimana jeda baris keras dilakukan / tidak memasukkan karakter carriage return. Sangat mudah untuk mengetahuinya dengan beberapa kode debug di sisi klien dan server.

Pointy

7

Saya mengganti urutan peringatan dan nilainya dipotong - dalam urutan asli, onkeyup akan memberi peringatan, menyebabkan kontrol kehilangan fokus dan onblur diaktifkan karena bidang belum dipotong.

GalacticCowboy

1

@JoshStodola - onblurtidak akan menangani pasta sampai pengguna mengklik keluar dari area teks. onkeyuptidak akan menangani paste jika dilakukan melalui menu konteks atau menu browser. Pendekatan ini berfungsi jika Anda tidak perlu menyaring untuk menempel. Lihat jawaban ini untuk pendekatan berbasis pengatur waktu stackoverflow.com/a/10390626/1026459

Travis J

3

@JoshStodola - Memang Anda tidak bisa. Ini akan benar-benar mengganggu saya sebagai pengguna jika saya telah menempelkan seluruh bagian dari sesuatu di textarea, mengklik kirim, dan hanya melihat sebagian kecil saja yang masuk tanpa respon apapun.

Travis J

80

Saya tahu Anda ingin menghindari jQuery, tetapi karena solusinya memerlukan JavaScript, solusi ini (menggunakan jQuery 1.4) adalah yang paling ringkas dan kuat.

Terinspirasi oleh, namun merupakan peningkatan dari jawaban Dana Woodman:

Perubahan dari jawaban itu adalah: Sederhana dan lebih umum, menggunakan jQuery.live dan juga tidak menyetel val jika panjangnya OK (mengarah ke tombol panah yang berfungsi di IE, dan speedup yang terlihat di 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));
    }
});

EDIT: Versi terbaru untuk jQuery 1.7+ , gunakan onsebagai penggantilive

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

1

Nice Eirik, seperti penggunaan live (lupakan saja!).

Dana Woodman

5

Saya menemukan bug di live () dan jQuery sudah tidak menggunakannya lagi. Gunakan pada () sebagai gantinya. Jika Anda peduli mengapa: britishdeveloper.co.uk/2012/04/…

BritishDeveloper

6

Tetapi jika mereka mengedit di tengah, ini akan membunuh karakter terakhir, bukan karakter baru, bukan?

Joe Mabel

6

Ya digunakan pada () dan berfungsi seperti permata. Terima kasih. inilah biola yang dimodifikasi dan diubah sedikit: jsfiddle.net/nXMqc

B-Money

6

Masalah dengan pemotongan adalah jika Anda memasukkan karakter ke tengah, karakter tersebut dimasukkan dan string dipotong dari ujung. Jika seluruh teks tidak terlihat sekaligus, ini bisa membingungkan. Juga menggunakan fungsi val (..) untuk mengubah nilai tampaknya memindahkan kursor ke ujung string. (jika Anda ingin mengujinya dengan browser modern, Anda perlu menghapus atribut maxlength - jika tidak, browser akan memberlakukan batasan).

Juha Palomäki

33

Perbarui Gunakan solusi Eirik menggunakan .live()sebagai gantinya karena sedikit lebih kuat.

Meskipun Anda menginginkan solusi yang tidak menggunakan jQuery, saya pikir saya akan menambahkannya untuk siapa pun yang menemukan halaman ini melalui Google dan mencari solusi 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));
        });

    });
});

Semoga bermanfaat bagi Anda para Googler di luar sana ...

Dana Woodman
sumber

1

Fungsi keyup bound haruslah: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

Brian Vallelunga

@ Brian Yup, Anda benar. Terima kasih telah melihat kesalahan saya, diperbaiki!

Dana Woodman

$ (ini) .val (fungsi (i, val) {return val.slice (0, maxlength)});

Dima Bildin

potongan ini masih berguna karena umpan baris dihitung sebagai 1 karakter di browser dan 2 di server ...

bebbo

32

HTML5 menambahkan maxlengthatribut ke textareaelemen, seperti:

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

Ini saat ini didukung di Chrome 13, FF 5, dan Safari 5. Tidak mengherankan, ini tidak didukung di IE 9. (Diuji di Win 7)

james.garriss
sumber

5

Solusi ini menghindari masalah di IE di mana karakter terakhir dihapus ketika karakter di tengah teks ditambahkan. Ini juga berfungsi dengan baik dengan browser lain.

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

Validasi formulir saya kemudian menangani masalah apa pun di mana pengguna mungkin telah menempelkan teks (tampaknya hanya menjadi masalah di IE) melebihi panjang maksimum textarea.

Chris R
sumber

4

Ini adalah beberapa kode tweak yang baru saja saya gunakan di situs saya. Ini ditingkatkan untuk menampilkan jumlah karakter yang tersisa kepada pengguna.

(Maaf lagi untuk OP yang tidak meminta jQuery. Tapi serius, siapa yang tidak menggunakan jQuery akhir-akhir ini?)

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

    });
});

Belum diuji dengan karakter multi-byte internasional, jadi saya tidak yakin bagaimana cara kerjanya dengan tepat.

Simon Timur
sumber

2

Tambahkan juga acara berikut untuk menangani penempelan ke dalam 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
sumber

Bisakah seseorang menambahkan ini ke badan jawaban jika menurut mereka tidak apa-apa? Belum punya cukup poin untuk melakukannya.

stusherwin

Fungsi tempel tidak standar. Saya yakin ini hanya berfungsi di IE.

Josh Stodola

Saya memperbarui jawaban saya untuk menangani situasi tempel. Terima kasih!

Josh Stodola

2

Atribut maxlength didukung di Internet Explorer 10, Firefox, Chrome, dan Safari.

Catatan: Atribut panjang maksimum dari <textarea>tag tidak didukung di Internet Explorer 9 dan versi sebelumnya, atau di Opera.

dari Atribut HTML maxlength w3schools.com

Untuk IE8 atau versi sebelumnya, Anda harus menggunakan yang berikut ini

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

Atribut maxlength dari <input>tag didukung di semua browser utama.

dari Atribut HTML maxlength w3schools.com

Eason
sumber

1

Solusi yang lebih baik dibandingkan dengan memangkas nilai textarea.

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

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

Bharat
sumber

1

Anda dapat menggunakan jQuery untuk membuatnya mudah dan jelas

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>

Ini diuji dalam Firefox, Google ChromedanOpera

MaxEcho
sumber

Saya khawatir ketika handler dijalankan, textdiisi dengan "nilai" dari texarea sebelum diperbarui. Ini berarti tes Anda seharusnya if( text.length +1 > maxlength) {return false;}. Jika tidak, seseorang hanya akan dapat memasukkan maxlength - 1karakter ke dalam:/

Stphane

Biola Anda memungkinkan pengguna memasukkan satu karakter lagi. IMO, tes Anda harus salah satu if(text.length+1 > maxlength)atau if(text.length >= maxlength)...

Stphane

Ini tidak berfungsi seperti yang diharapkan ketika saya menyalin dan menempelkan konten

Ranjit Kumar

0

Masalah kecil dengan kode di atas adalah bahwa val () tidak memicu peristiwa change (), jadi jika Anda menggunakan backbone.js (atau kerangka kerja lain untuk pengikatan model), model tidak akan diperbarui.

Saya memposting solusi bekerja sangat baik untuk saya.

$(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
sumber

0

Saya menerapkan maxlengthperilaku textareabaru-baru ini, dan mengalami masalah yang dijelaskan dalam pertanyaan ini: Chrome menghitung karakter yang salah dalam textarea dengan atribut maxlength .

Jadi semua implementasi yang tercantum di sini akan bekerja dengan sedikit bug. Untuk mengatasi masalah ini saya tambahkan .replace(/(\r\n|\n|\r)/g, "11")sebelumnya .length. Dan selalu diingat saat memotong tali.

Saya mengakhirinya dengan sesuatu seperti ini:

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

Tidak yakin apakah itu menyelesaikan masalah sepenuhnya, tetapi itu berhasil untuk saya untuk saat ini.

Roman Pominov
sumber

0

Coba jQuery ini yang berfungsi di IE9, FF, Chrome dan memberikan hitungan mundur kepada pengguna:

$("#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>

Leslie King
sumber

0

Coba gunakan contoh kode ini:

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

naveen
sumber

-1

Ini jauh lebih mudah:

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

Luaskan cuplikan

erdomester
sumber

2

Perhatikan bahwa solusi ini tidak sepenuhnya mereplikasi maxlengthkarena Anda dapat menempelkan string yang lebih panjang dari panjang yang diinginkan.

Chris Bier

Cara memaksakan maxlength pada textArea dalam HTML menggunakan JavaScript

Jawaban: