Giới hạn số dòng trong textarea

Tôi đang tìm một javascript có thể giới hạn số dòng (theo dòng tôi có nghĩa là một số văn bản đã kết thúc bằng cách nhấn enter trên bàn phím) người dùng có thể nhập vào vùng văn bản. Tôi đã tìm thấy một số giải pháp nhưng họ chỉ đơn giản là không làm việc hoặc hành xử thực sự kỳ lạ. Giải pháp tốt nhất sẽ là một plugin jquery có thể thực hiện công việc - chẳng hạn như CharLimit, nhưng nó có thể giới hạn số lượng dòng văn bản không phải là số ký tự.Giới hạn số dòng trong textarea

Xin cảm ơn trước.

Nguồn

2009-02-17 empi

Xác định "dòng". Đường hiển thị? Các dòng được giới hạn bởi một '\ n' hay cái gì khác? – alphadogg

sức giúp đỡ này (có lẽ là tốt nhất sử dụng jQuery, onDomReady và kín đáo thêm sự kiện KeyDown vào textarea) nhưng kiểm tra trong IE7 và FF3:

<html> 
    <head><title>Test</title></head> 
    <body> 
    <script type="text/javascript"> 
     var keynum, lines = 1; 

     function limitLines(obj, e) { 
     // IE 
     if(window.event) { 
      keynum = e.keyCode; 
     // Netscape/Firefox/Opera 
     } else if(e.which) { 
      keynum = e.which; 
     } 

     if(keynum == 13) { 
      if(lines == obj.rows) { 
      return false; 
      }else{ 
      lines++; 
      } 
     } 
     } 
     </script> 
    <textarea rows="4" onkeydown="return limitLines(this, event)"></textarea> 
    </body> 
</html>

* Edit - giải thích: Nó bắt bấm phím nếu phím ENTER được nhấn và không thêm một dòng mới nếu các dòng trong vùng văn bản có cùng số với các hàng của vùng văn bản. Khác nó tăng số lượng các dòng.

Nguồn

2009-02-17 15:03:04 marktucks

Điều này có vấn đề khi người dùng nhấn backspace dẫn đến việc xóa toàn bộ dòng, sau đó giới hạn số lượng hàng có sẵn để viết, và có thể xóa tất cả các hàng chỉ để lại một dòng để viết. Nó cũng không hoạt động tốt khi người dùng nhập nhiều ký tự khiến họ di chuyển vào một dòng mới nhưng sau đó dòng được tạo không được tính để giới hạn dòng. –

Cảm ơn bạn rất nhiều marktucks – Visme

cũng không thành công khi dán. – Anas

Số dòng hiển thị/hiển thị cho một khối văn bản nhất định sẽ thay đổi với các trình duyệt khác nhau, phông chữ được sử dụng, v.v. Bạn phải đặt phông chữ và cỡ chữ cụ thể bán đáng tin cậy đếm dòng hiển thị.

CẬP NHẬT: Tôi thấy bản chỉnh sửa. Sau đó, một cái gì đó giống như mã kevchadders nên làm tốt cho bạn. Bạn sẽ cần js đếm ký tự và '\ r \ n và kiểm tra dựa trên giới hạn do người dùng xác định. Ngoài ra, nếu bạn không sử dụng tập lệnh của mình, hãy đảm bảo bạn sử dụng tập lệnh có liên quan đến kiểm tra khoảng thời gian và/hoặc các sự kiện onKeyDown/onKeyUp của vùng văn bản. Đây có thể là lý do tại sao một số tập lệnh bạn đã thử nghiệm dường như "cư xử kỳ lạ".

Nguồn

2009-02-17 13:31:48 alphadogg

Có vẻ như empi đã chỉnh sửa câu hỏi trên ya;) Line == "\ n" –

Điều này về cơ bản giống như câu trả lời của Ivan, sử dụng jQuery. Tôi đã thử nghiệm nó cho một dự án của riêng tôi; dường như làm việc tốt.

<script type="text/javascript" charset="utf-8"> 
    $(function() 
    { 
    function getLines(id) 
    { 
     return $('#' + id).val().split("\n").length 
    } 

    $('#testing').keyup(function() 
    { 
    var allowedNumberOfLines = 4; 

    if(getLines('testing') > allowedNumberOfLines) 
    { 
     modifiedText = $(this).val().split("\n").slice(0, allowedNumberOfLines); 
     $(this).val(modifiedText.join("\n")); 
    } 
    }); 
}); 
</script>

Nguồn

2009-03-31 19:58:32

getLines (id) phải là getLines (el) trong đó $ ('# testing') được gửi trực tiếp đến hàm getLines. Tối ưu hóa dễ dàng. – jamtoday

Nhưng việc này có hoạt động với các từ được tự động gói khi bạn nhập không? Chức năng của bạn chỉ dựa trên các dòng mới. – acme

Làm thế nào để làm điều đó với jQuery:

Bind to keyDown trường hợp textarea.

function limitTextareaLine(e) { 
    if(e.keyCode == 13 && $(this).val().split("\n").length >= $(this).attr('rows')) { 
     return false; 
    } 
}

Nguồn

2011-06-27 06:13:11 Maciej

Xin chào Maciej, cảm ơn câu trả lời. Bạn có thể cung cấp một ví dụ về điều này không? – chainwork

@chainwork Chắc chắn. [Ví dụ] (http://jsbin.com/ufeyom/2/edit) – Maciej

Chiến lược này không thành công khi người dùng dán các dòng mới vào vùng văn bản. –

(Đã hoàn thành với jquery). Nó không hoàn hảo nhưng quan tâm đến việc gói. Không chỉ xuất hiện ở cuối dòng (\ n).
sự kiện jquery cuộn có vấn đề trong mozilla và firefox nếu css tràn tài sản trong textarea không phải là tự động, nếu không loại bỏ các dòng tương ứng và thiết lập tràn ẩn. Có thể giúp thay đổi kích thước css: none và cố định chiều cao.

$('#textarea').scroll(function() { 
    $(this).css("overflow", "hidden");  /* for the mozilla browser problem */ 
    $(this).animate({scrollTop: $(this).outerHeight()}); 
    while ($(this).scrollTop() > 0) {  /* for the copy and paste case */    
     lines=$(this).val().slice(0,-1); 
     $(this).val(lines); 
    } 
    $(this).css("overflow", "auto");  /* For the mozilla browser problem */ 
});

Nguồn

2011-08-09 15:42:23

Tôi đã mở rộng nó một chút để phát hiện tràn ngay cả khi không có ngắt dòng thủ công. Điều này là dành cho văn bản kích thước cố định với "overflow: hidden".

Hiện tại, giải pháp của tôi làm cho phông chữ nhỏ hơn nếu nó không vừa với văn bản. Và làm cho nó lớn hơn một lần nữa nếu có thể.

var keynum, allowedLines = 5, defaultFontSize = 13/*px*/; 

$(document).ready(function() { 
    $("textarea").keydown(function(e, obj) { 
     if(window.event) 
      keynum = e.keyCode; 
     else if (e.which) 
      keynum = e.which; 

     if (keynum == 13 && allowedLines <= $(this).val().split("\n").length) 
      return false; 
    }); 
    $("textarea").keyup(function(e, obj) { 
     // Avoid copy-paste 
     if (allowedLines < $(this).val().split("\n").length) {    
      lines = $(this).val().split("\n").slice(0, allowedLines); 
      $(this).val(lines.join('\n')); 
     } 

     // Check overflow 
     if ((this.clientHeight < this.scrollHeight)) { 
      while ((this.clientHeight < this.scrollHeight)) { 
       currFontSize = $(this).css('font-size'); 
       finalNum = parseFloat(currFontSize, 11); 
       stringEnding = currFontSize.slice(-2); 
       $(this).css('font-size', (finalNum-1) + stringEnding); 
      } 
     } else if ($(this).css('fontSize') != defaultFontSize+'px') { 
      while ($(this).css('font-size') != defaultFontSize+'px') { 
       // First lets increase the font size 
       currFontSize = $(this).css('font-size'); 
       finalNum = parseFloat(currFontSize, 11); 
       stringEnding = currFontSize.slice(-2); 
       $(this).css('font-size', (finalNum+1) + stringEnding); 
       // lets loop until its enough or it gets overflow again 
       if(this.clientHeight < this.scrollHeight) { 
        // there was an overflow and we have to recover the value 
        $(this).css('font-size', currFontSize); 
        break; 
       } 
      } 
     } 
    }); 
});

Nguồn

2011-12-03 23:38:44 vellotis

Giải pháp này hoạt động:

<script type="text/javascript"> 
    function limitTextarea(textarea, maxLines, maxChar) { 
     var lines = textarea.value.replace(/\r/g, '').split('\n'), lines_removed, char_removed, i; 
     if (maxLines && lines.length > maxLines) { 
      lines = lines.slice(0, maxLines); 
      lines_removed = 1 
     } 
     if (maxChar) { 
      i = lines.length; 
      while (i-- > 0) if (lines[i].length > maxChar) { 
       lines[i] = lines[i].slice(0, maxChar); 
       char_removed = 1 
      } 
      if (char_removed || lines_removed) { 
       textarea.value = lines.join('\n') 
      } 
     } 
    } 
</script>

và văn bản khu vực sẽ là

<asp:TextBox ID="myWishTB" runat="server" Height="185px" TextMode="MultiLine" 
      Style="overflow: auto;" Width="95%" 
      onkeyup="limitTextarea(this,10,80)"> 
</asp:TextBox>

trong HTML thông thường:

<textarea id="textareaID" onkeyup="limitTextarea(this,5,100)" cols="20" rows="5"> </textarea>

Nguồn

2012-12-18 22:24:27

jQuery ví dụ. Điều này làm việc cho cả việc nhập và dán.

//Limit to # of rows in textarea or arbitrary # of rows 
    $('#yourtextarea').bind('change keyup', function(event) { 
    //Option 1: Limit to # of rows in textarea 
    rows = $(this).attr('rows'); 
    //Optiion 2: Limit to arbitrary # of rows 
    rows = 6; 

    var value = ''; 
    var splitval = $(this).val().split("\n"); 

    for(var a=0;a<rows && typeof splitval[a] != 'undefined';a++) { 
     if(a>0) value += "\n"; 
     value += splitval[a]; 
    } 
    $(this).val(value); 
    });

Nguồn

2013-09-06 20:52:18 user158456

Giới hạn số dòng trong textarea

Trả lời

Các vấn đề liên quan