JavaScript kullanarak HTML'de textArea'ya maksimum uzunluk empoze etme

116

Bazı işlevlere sahip olmak isterim ki bu sayede yazarsam

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

maksimum uzunluğu otomatik olarak textArea üzerine empoze edecektir. Mümkünse lütfen çözümü jQuery'de sağlamayın.

Not: Böyle bir şey yaparsam bu yapılabilir:

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

Kopyalama kaynağı Bir HTML metin alanında bir HTML girdisi "maxlength" özniteliğini taklit etmenin en iyi yolu nedir?

Ama mesele şu ki, her textArea bildirdiğimde onKeyPress ve onKeyUp yazmak istemiyorum.

javascript html textarea

— Rakesh Juyal
kaynak

4

metin alanları için maxlenth html5 içindedir. Şu anda Chrome'da çalışıyor ama Firefox'ta değil.

— 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
kaynak

3

Josh, işe yarayacak gibi görünüyor ama lütfen bu şeyin ne işe yarayacağını açıklar mısınız --- if (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

— Rakesh Juyal

2

Anlaşmanın ne olduğunu hatırladığımı düşünüyorum: FF veya IE (sanırım FF), Javascript "değer" özniteliğini kontrol ettiğinde, form yayınlandığında sunucuya geri gönderdiğinden farklı bir dize döndürür! Bunun, satır sonlarının ne kadar katı satır sonu karakteri eklediği / almadığıyla bir ilgisi vardır. İstemci ve sunucu taraflarında bazı hata ayıklama kodlarıyla anlaşılması kolaydır.

— Sivri

7

Uyarının sırasını değiştirdim ve değer kesildi - orijinal sırayla, onkeyup uyarı veriyordu, bu da kontrolün odağını kaybetmesine ve alan henüz kesilmediği için bulanıklığın ateşlenmesine neden oluyordu.

— GalacticCowboy

1

@JoshStodola - onblurkullanıcı metin alanının dışına tıklayana kadar yapıştırmayı işlemez. onkeyupiçerik menüsü veya tarayıcı menüsü aracılığıyla yapılırsa yapıştırmayı işlemez. Bu yaklaşım, yapıştırma için taramanıza gerek yoksa işe yarar. Zamanlayıcı tabanlı bir yaklaşım stackoverflow

— Travis J

3

@JoshStodola - Gerçekten yapamazsınız. Bir metin alanına bir şeyin tamamını yapıştırmış olsaydım, gönder'e tıklasaydım ve sadece küçük bir kısmının herhangi bir yanıt olmadan geçtiğini görseydim, kullanıcı olarak beni gerçekten rahatsız ederdi.

— Travis J

80

JQuery'den kaçınmak istediğinizi biliyorum, ancak çözüm JavaScript gerektirdiğinden, bu çözüm (jQuery 1.4 kullanan) en makul ve sağlam çözümdür.

İlham aldı, ancak Dana Woodman'ın cevabının üzerinde bir gelişme:

Bu yanıttaki değişiklikler şunlardır: Basitleştirilmiş ve daha genel, jQuery.live kullanarak ve ayrıca uzunluk uygunsa val'yi ayarlamama (IE'de ok tuşlarının çalışmasına ve IE'de fark edilebilir hızlanmaya yol açar):

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

DÜZENLE: yerine kullanarak jQuery 1.7+ için güncellenmiş sürümonlive

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

1

Güzel Eirik, canlı kullanım gibi (unuttum!).

— Dana Woodman

5

Live () 'da hatalar buldum ve jQuery bunu onaylamadı. Bunun yerine on () kullanın. Nedenini önemsiyorsanız: britishdeveloper.co.uk/2012/04/…

— BritishDeveloper

6

Ama ortada kurgulamışlarsa, bu yeni karakteri değil son karakteri öldürecek, değil mi?

— Joe Mabel

6

Evet () üzerinde kullanıldı ve bir mücevher gibi çalışıyor. Teşekkürler. işte değiştirilmiş ve ince ayarlı bir

— B-Money

6

Dilimlemeyle ilgili sorun, karakterleri ortasına girerseniz, bunlar eklenir ve dizenin uçtan kesilmesi. Metnin tamamı aynı anda görünmüyorsa, bu kafa karıştırıcı olabilir. Ayrıca değeri değiştirmek için val (..) işlevinin kullanılması, imleci dizenin sonuna götürüyor gibi görünüyor. (Bunları modern bir tarayıcıyla kemanla test etmek istiyorsanız, maxlength özelliğini kaldırmanız gerekir - aksi takdirde tarayıcı limiti uygular).

— Juha Palomäki

33

Güncelle.live() Biraz daha sağlam olduğu için bunun yerine Eirik'in çözümünü kullanın .

JQuery kullanmayan bir çözüm istemenize rağmen, bu sayfayı Google aracılığıyla bulan ve jQuery benzeri bir çözüm arayan herkes için bir çözüm ekleyeceğimi düşündüm:

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

    });
});

Umarım bu, Google çalışanları için yararlıdır ...

— Dana Woodman
kaynak

1

Anahtar bağlı işlev şöyle olmalıdır: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

— Brian Vallelunga

@brian Yup, haklısın. Hatamı tespit ettiğiniz için teşekkürler, düzeltildi!

— Dana Woodman

$ (bu) .val (işlev (i, değer) {dönüş val.slice (0, maksimum uzunluk)});

— Dima bildin

satır beslemeleri tarayıcıda 1 karakter ve sunucuda 2 karakter olarak sayıldığından bu pasaj hala yararlıdır ...

— bebbo

32

HTML5 maxlength, textareaöğeye şöyle bir öznitelik ekler :

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

Bu, şu anda Chrome 13, FF 5 ve Safari 5'te desteklenmektedir. Şaşırtıcı olmayan bir şekilde, bu IE 9'da desteklenmemektedir. (Win 7'de test edilmiştir)

— james.garriss
kaynak

5

Bu çözüm, IE'de metnin ortasına bir karakter eklendiğinde son karakterin kaldırılması sorununu ortadan kaldırır. Ayrıca diğer tarayıcılarla da sorunsuz çalışır.

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

Form doğrulamam, kullanıcının metin alanının maksimum uzunluğunu aşan metni yapıştırmış olabileceği (yalnızca IE'de bir sorun gibi görünüyor) sorunları ele alıyor.

— Chris R
kaynak

4

Bu, sitemde az önce kullandığım ince ayarlanmış bir kod. Kalan karakter sayısını kullanıcıya göstermek için geliştirildi.

(JQuery istemeyen OP'ye tekrar özür dilerim. Ama cidden, bu günlerde kim jQuery kullanmıyor?)

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

    });
});

Uluslararası çok baytlı karakterlerle test edilmemiştir, bu yüzden tam olarak onlarla nasıl çalıştığından emin değilim.

— Simon East
kaynak

2

Ayrıca, metin alanına yapıştırmayla ilgilenmek için aşağıdaki olayı ekleyin:

...

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
kaynak

Sorun olmadığını düşünen biri bunu cevap gövdesine ekleyebilir mi? Bunu yapmak için henüz yeterli puanınız yok.

— stusherwin

Yapıştırma işlevi standartlaştırılmamıştır. Sadece IE'de çalıştığına inanıyorum.

— Josh Stodola

Yapıştırma durumunu ele almak için cevabımı güncelledim. Teşekkür ederim!

— Josh Stodola

2

Maxlength özniteliği Internet Explorer 10, Firefox, Chrome ve Safari'de desteklenmektedir.

Not:<textarea> Etiketin maxlength niteliği, Internet Explorer 9 ve önceki sürümlerde veya Opera'da desteklenmez.

dan HTML maxlength Özellik w3schools.com

IE8 veya önceki sürümler için aşağıdakileri kullanmanız gerekir

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

<input>Etiketin maxlength niteliği tüm büyük tarayıcılarda desteklenir.

dan HTML maxlength Özellik w3schools.com

— Eason
kaynak

1

Metin alanının değerini kırpmaya kıyasla Daha İyi Çözüm.

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

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

— Bharat
kaynak

1

Kolay ve anlaşılır hale getirmek için jQuery'yi kullanabilirsiniz

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>

Bu test edilir Firefox, Google ChromeveOpera

— MaxEcho
kaynak

İşleyici yürütüldüğünde, textgüncellenmeden önce texarea'nın "değeri" ile doldurulmasından korkuyorum. Bu, testinizin olması gerektiği anlamına gelir if( text.length +1 > maxlength) {return false;}. Aksi takdirde, yalnızca maxlength - 1karakterleri içeriye koyabilirdi:/

— Stphane

Kemanınız kullanıcının bir karakter daha girmesine izin verir. IMO, testin şu ya if(text.length+1 > maxlength)da olmalı if(text.length >= maxlength)...

— Stphane 05

İçeriği kopyalayıp yapıştırdığımda beklendiği gibi çalışmıyor

— Ranjit Kumar

0

Yukarıdaki kodla ilgili küçük bir sorun, val () 'nin change () olayını tetiklememesidir, bu nedenle, backbone.js (veya model bağlama için başka bir çerçeve) kullanıyorsanız, model güncellenmez.

Çözümü yayınlıyorum benim için harika çalıştı.

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

0

Son zamanlarda maxlengthdavranışını uyguladım textareave şu soruda açıklanan sorunla karşılaştım: Chrome, metin alanında yanlış karakterleri maxlength özniteliğiyle sayıyor .

Yani burada listelenen tüm uygulamalar biraz hatalı çalışacaktır. Bu sorunu çözmek için daha .replace(/(\r\n|\n|\r)/g, "11")önce ekledim .length. Ve ipi keserken aklınızda bulundurun.

Böyle bir şeyle bitirdim:

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

Sorunu tamamen çözüp çözmediğinden emin değilim, ama şimdilik benim için çalışıyor.

— Roman Pominov
kaynak

0

IE9, FF, Chrome'da çalışan ve kullanıcılara geri sayım sağlayan bu jQuery'yi deneyin:

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

0

Bu kod örneğini kullanmayı deneyin:

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

— naveen
kaynak

-1

Bu çok daha kolay:

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

Snippet'i genişlet

— erdomester
kaynak

2

maxlengthİstenilen uzunluktan daha uzun dizeleri yapıştırabileceğiniz için bu çözümün tam olarak kopyalanmadığını unutmayın.

— Chris Bier