Soru Html Textarea'da maxlength'i ayarlayın [duplicate]


Bu sorunun zaten bir cevabı var:

Nasıl ayarlayabilirim maxlength içinde textarea? Ve neden maxlength düzgün çalışmıyor textarea?


44
2017-12-16 10:19


Menşei




Cevaplar:


HTML5'ten önce, kolay ama uygulanabilir bir yolumuz var: İlk olarak textarea öğesinde bir max uzunluk özniteliği ayarlayın:

<textarea maxlength='250' name=''></textarea>  

Daha sonra kullanıcı girişini sınırlamak için JavaScript'i kullanın:

$(function() {  
    $("textarea[maxlength]").bind('input propertychange', function() {  
        var maxLength = $(this).attr('maxlength');  
        if ($(this).val().length > maxLength) {  
            $(this).val($(this).val().substring(0, maxLength));  
        }  
    })  
});

Her ikisinin de bağlandığından emin olun.giriş" ve "PropertyChange"Firefox / Safari ve IE gibi çeşitli tarayıcılarda çalışmasını sağlayacak olaylar.


88
2017-08-26 15:49



HTML5'i kullanmak için başvurmak bir cevap değil. Çapraz tarayıcı desteği bekliyoruz. Bu, bugüne kadar en doğru cevabı yapar. - 3Dom
Bu çözümün "saf" javascript olmadığını, JQuery kullanımını gerektirdiğini unutmayın. (JQuery olmadan denemek ve neden işe yaramadığını merak ediyorum.) - Frédéric
Ne yazık ki bu, textarea'daki herhangi bir yeni satır için beklendiği gibi çalışmıyor. Sanırım JavaScript bir satırsonu ikiden ziyade bir karakter olarak ele alıyor, bu yüzden bir "max length" dizgisini veritabanına eklemeyi denediğimde bir hata alıyorum. - Coxy
Yanılıyor olabilirim, ama kısa bir hikaye yazıyorsam ve metin kutusunun başında yazı ekliyorsam, yazımın sonunda yazının sonu kesilecek. Muhtemelen bilgim olmadan. - David Gilbertson
@ 3Dom: "HTML5'i kullanmak için başvurmak bir cevap değil." - HTML5 dokümanı kullanma olduğu desteklenen çapraz tarayıcı (eski tarayıcılarda nelerin işe yaradığını görmek için çeşitli doktrinleri test ettiler) ve HTML5'te tanıtılan bir JavaScript geri dönüşü ile desteklenen bir özniteliği destekleyen tarayıcılar da çapraz tarayıcı uyumludur. - Paul D. Waite


HTML 5 kullanıyorsanız, bunu sizin için belirtmeniz gerekir. DOCTYPE beyanı.

Geçerli bir HTML 5 belgesi için aşağıdakilerle başlamalıdır:

<!DOCTYPE html>

HTML 5'ten önce textarea öğesinde bir maxlength bağlıyor.

Bunu içinde görebilirsiniz DTD / Spec:

<!ELEMENT TEXTAREA - - (#PCDATA)       -- multi-line text field -->
<!ATTLIST TEXTAREA
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  rows        NUMBER         #REQUIRED
  cols        NUMBER         #REQUIRED
  disabled    (disabled)     #IMPLIED  -- unavailable in this context --
  readonly    (readonly)     #IMPLIED
  tabindex    NUMBER         #IMPLIED  -- position in tabbing order --
  accesskey   %Character;    #IMPLIED  -- accessibility key character --
  onfocus     %Script;       #IMPLIED  -- the element got the focus --
  onblur      %Script;       #IMPLIED  -- the element lost the focus --
  onselect    %Script;       #IMPLIED  -- some text was selected --
  onchange    %Script;       #IMPLIED  -- the element value was changed --
  %reserved;                           -- reserved for possible future use --
  >

İçine yazılan karakterlerin sayısını sınırlamak için textareaile javascript kullanmanız gerekecek onChange Etkinlik. Daha sonra karakter sayısını sayar ve daha fazla yazmayı engelleyebilirsiniz.

İşte metin girişi hakkında derinlemesine bir tartışma ve boyutu sınırlamak için sunucu ve istemci tarafı komut dosyasının nasıl kullanılacağıdır.

İşte başka bir örnek.


16
2017-12-16 10:21





html4'te textarea için maxlength yapmanın basit bir yolu:

<textarea cols="60" rows="5" onkeypress="if (this.value.length > 100) { return false; }"></textarea>

İstediğiniz kadar çok karakteri "100" olarak değiştirin


9
2017-12-19 18:07



Bir textarea'ya yapıştırma gibi metin eklemekten başka yollar da vardır. Bu çözüm muhtemelen onlar için işe yaramıyor. - Frédéric
Sadece, aynı zamanda, maksimum boyutunuzu aşan bir sayıya yapıştırılan veya yüklenen karakterleri silmenizi de engeller (fareyle seçip kesip kesmeniz gerekir ...). - Andrea Ligios
Inline javascript olayı bağlaması, bu kısıtlamaların uygulanmasına yönelik en semantik yol değildir. - Evin Ugur
Bu çözümle ilgili başka bir konu, eğer karakter sayısı sınırlandıysa, artık klavyeyi kullanmanın bir yolu yoktur. backspace - Mehdi Dehghani


Aqingsao'nun cevabına yapılan bir yorumda söylediğim gibi, textarea en az Windows'da yeni satır karakterleri var.

Cevabını biraz değiştirdim bu yüzden:

$(function() {
    $("textarea[maxlength]").bind('input propertychange', function() {
        var maxLength = $(this).attr('maxlength');
        //I'm guessing JavaScript is treating a newline as one character rather than two so when I try to insert a "max length" string into the database I get an error.
        //Detect how many newlines are in the textarea, then be sure to count them twice as part of the length of the input.
        var newlines = ($(this).val().match(/\n/g) || []).length
        if ($(this).val().length + newlines > maxLength) {
            $(this).val($(this).val().substring(0, maxLength - newlines));
        }
    })
});

Artık yeni satırlarda birçok veriyi yapıştırmaya çalıştığımda, tam olarak doğru sayıda karakter elde ediyorum.


7
2018-05-14 06:06





$(function(){  
  $("#id").keypress(function() {  
    var maxlen = 100;
    if ($(this).val().length > maxlen) {  
      return false;
    }  
  })
});  

1
2017-10-17 02:53





HTML5'ten önce, bunu yalnızca JavaScript’le veya sunucu tarafı doğrulamasıyla kontrol etmek mümkündür (JavaScript’in açıkçası yalnızca JavaScript’te etkin olarak çalıştığı için ...). Textareas için doğal maksimum uzunluk özelliği yoktur.

HTML5'ten beri geçerli bir özellik olduğundan, doktrinizin HTML5 olarak tanımlanması yardımcı olabilir. Ancak tüm tarayıcıların bu özelliği destekleyip desteklemediğini bilmiyorum:

<!DOCTYPE html>

0
2017-12-16 10:26





bunu dene

$(function(){
  $("textarea[maxlength]")
    .keydown(function(event){
       return !$(this).attr("maxlength") || this.value.length < $(this).attr("maxlength") || event.keyCode == 8 || event.keyCode == 46;
    })
    .keyup(function(event){
      var limit = $(this).attr("maxlength");

      if (!limit) return;

      if (this.value.length <= limit) return true;
      else {
        this.value = this.value.substr(0,limit);
        return false;
      }    
    });
});

Benim için ek karakterler göstermeden / göstermeden gerçekten mükemmel çalışır; girişte maxlength gibi çalışır


0
2017-10-11 11:19



Bu, tüm tarayıcılarda düzgün çalışmayacaktır. Sabit yeni satırlar <textarea> Öğeler, Firefox ve Webkit'te doğru olarak sayılmıyor (ya da değil; düzeltmiş olabilirler). Sabit yeni satırlar olmalı iletilen Bir CR-LF çifti (spekülasyon başına) olarak, ancak Firefox ve Webkit sadece 1 karakter olarak sert satır sonlarını saymaktadır. - Pointy


<p>
   <textarea id="msgc" onkeyup="cnt(event)" rows="1" cols="1"></textarea> 
</p> 
<p id="valmess2" style="color:red" ></p>

function cnt(event)
{ 
 document.getElementById("valmess2").innerHTML=""; // init and clear if b < max     
allowed character 

 a = document.getElementById("msgc").value; 
 b = a.length; 
 if (b > 400)
  { 
   document.getElementById("valmess2").innerHTML="the max length of 400 characters is 
reached, you typed in  " + b + "characters"; 
  } 
}

maxlength sadece HTML5 için geçerlidir. HTML / XHTML için JavaScript ve / veya PHP kullanmanız gerekir. PHP ile örneğin strlen kullanabilirsiniz. Bu örnek sadece maksimum uzunluğu gösterir, girişi engellemez.


0
2017-11-05 18:20





yeniden boyutlandırmak: none; Bu özellik metin alanınızı düzeltir ve ona bağlar. Bu css özelliğini kullandığınızda, textarea.gave metin alanınızın bir kimliğini ve bu kimliğin adına bu css özelliğini kullanabilirsiniz.


-1
2018-06-15 08:13