Cách áp dụng maxlength trên textArea trong HTML bằng JavaScript

116

Tôi muốn có một số chức năng mà nếu tôi viết

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

nó sẽ tự động áp đặt cường độ tối đa trên textArea. Nếu có thể, vui lòng không cung cấp giải pháp trong jQuery.

Lưu ý: Điều này có thể được thực hiện nếu tôi làm điều gì đó như sau:

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

Được sao chép từ Cách tốt nhất để mô phỏng thuộc tính “maxlength” đầu vào HTML trên một vùng văn bản HTML là gì?

Nhưng vấn đề là tôi không muốn viết onKeyPress và onKeyUp mỗi khi tôi khai báo một textArea.

javascript html textarea

— Rakesh Juyal
nguồn

4

maxlenth cho textareas là html5. Hiện nó hoạt động trên Chrome nhưng không hoạt động trên 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
nguồn

3

Josh có vẻ như nó sẽ hoạt động nhưng bạn vui lòng giải thích điều này sẽ làm gì --- nếu (/ ^ [0-9] + $ /. Test (txts [i] .getAttribute ("maxlength"))) {- -

— Rakesh Juyal

2

Tôi nghĩ tôi nhớ thỏa thuận là gì: FF hoặc IE (tôi nghĩ đó là FF) trả về một chuỗi khác khi Javascript kiểm tra thuộc tính "giá trị" so với những gì nó gửi trở lại máy chủ khi biểu mẫu được đăng! Nó có liên quan đến cách ngắt dòng cứng làm / không chèn ký tự xuống dòng. Thật dễ dàng để tìm ra một số mã gỡ lỗi ở phía máy khách và máy chủ.

— Pointy

7

Tôi đã chuyển đổi thứ tự của cảnh báo và giá trị bị cắt bớt - theo thứ tự ban đầu, phím tắt sẽ cảnh báo, khiến điều khiển mất tiêu điểm và bật lửa kích hoạt vì trường vẫn chưa được cắt ngắn.

— GalacticCowboy

1

@JoshStodola - onblursẽ không xử lý quá trình dán cho đến khi người dùng nhấp ra khỏi vùng văn bản. onkeyupsẽ không xử lý quá trình dán nếu nó được thực hiện thông qua menu ngữ cảnh hoặc menu trình duyệt. Cách tiếp cận này hoạt động nếu bạn không cần sàng lọc để dán. Xem câu trả lời này cho một giờ tiếp cận dựa trên stackoverflow.com/a/10390626/1026459

— Travis J

3

@JoshStodola - Thật vậy, bạn không thể. Với tư cách là một người dùng, tôi sẽ thực sự khó chịu với tư cách là người dùng nếu tôi đã dán toàn bộ một thứ gì đó vào một vùng văn bản, nhấp vào gửi và chỉ thấy một phần nhỏ trong số đó được chuyển đi mà không có bất kỳ phản hồi nào.

— Travis J

80

Tôi biết bạn muốn tránh jQuery, nhưng vì giải pháp yêu cầu JavaScript, giải pháp này (sử dụng jQuery 1.4) là khó khăn và mạnh mẽ nhất.

Lấy cảm hứng từ, nhưng là một cải tiến so với câu trả lời của Dana Woodman:

Những thay đổi từ câu trả lời đó là: Đơn giản hơn và chung chung hơn, sử dụng jQuery.live và cũng không đặt val nếu độ dài là OK (dẫn đến các phím mũi tên hoạt động trong IE và tăng tốc đáng chú ý trong 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));
    }
});

CHỈNH SỬA: Phiên bản cập nhật cho jQuery 1.7+ , sử dụng onthay vì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
nguồn

1

Eirik tốt đẹp, thích sử dụng trực tiếp (quên mất nó!).

— Dana Woodman

5

Tôi đã tìm thấy lỗi trong live () và jQuery đã không dùng nó nữa. Sử dụng on () để thay thế. Nếu bạn quan tâm đến lý do tại sao: britishdeveloper.co.uk/2012/04/...

— BritishDeveloper

6

Nhưng nếu họ chỉnh sửa giữa chừng, điều này sẽ giết nhân vật cuối cùng, không phải nhân vật mới, phải không?

— Joe Mabel

6

Yep được sử dụng trên () và nó hoạt động như một viên ngọc. Cảm ơn. Dưới đây là một sửa đổi và tinh chỉnh một chút fiddle: jsfiddle.net/nXMqc

— B-Money

6

Vấn đề với việc cắt lát là nếu bạn nhập các ký tự vào giữa, chúng sẽ được chèn và chuỗi bị cắt từ cuối. Nếu toàn bộ văn bản không hiển thị cùng một lúc, điều này có thể gây nhầm lẫn. Cũng sử dụng hàm val (..) để thay đổi giá trị dường như di chuyển con trỏ đến cuối chuỗi. (nếu bạn muốn kiểm tra những điều này với trình duyệt hiện đại trong fiddle, bạn cần phải xóa thuộc tính maxlength - nếu không trình duyệt sẽ thực thi giới hạn).

— Juha Palomäki

33

Cập nhật Sử dụng giải pháp của Eirik .live()thay thế vì nó mạnh hơn một chút.

Mặc dù bạn muốn một giải pháp không sử dụng jQuery, tôi nghĩ tôi sẽ thêm một giải pháp cho bất kỳ ai tìm thấy trang này qua Google và tìm kiếm giải pháp 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));
        });

    });
});

Hy vọng rằng điều đó hữu ích cho các bạn nhân viên Google ...

— Dana Woodman
nguồn

1

Hàm ràng buộc keyup phải là: $ (this) .val ($ (this) .val (). Slice (0, maxlength));

— Brian Vallelunga

@brian Yup, bạn chính xác. Cảm ơn vì đã phát hiện ra lỗi của tôi, đã sửa!

— Dana Woodman

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

— Dima Bildin,

đoạn này vẫn còn hữu ích từ thức ăn đường được tính là 1 nhân vật trong trình duyệt và 2 trong máy chủ ...

— bebbo

32

HTML5 thêm một maxlengththuộc tính vào textareaphần tử, như sau:

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

Tính năng này hiện được hỗ trợ trong Chrome 13, FF 5 và Safari 5. Không ngạc nhiên khi tính năng này không được hỗ trợ trong IE 9. (Đã thử nghiệm trên Win 7)

— james.garriss
nguồn

5

Giải pháp này tránh được sự cố trong IE khi ký tự cuối cùng bị xóa khi một ký tự ở giữa văn bản được thêm vào. Nó cũng hoạt động tốt với các trình duyệt khác.

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

Xác thực biểu mẫu của tôi sau đó giải quyết bất kỳ vấn đề nào mà người dùng có thể đã dán (chỉ có vẻ là vấn đề trong IE) văn bản vượt quá độ dài tối đa của vùng văn bản.

— Chris R
nguồn

4

Đây là một số mã đã được chỉnh sửa mà tôi vừa mới sử dụng trên trang web của mình. Nó được cải thiện để hiển thị số ký tự còn lại cho người dùng.

(Một lần nữa xin lỗi OP, người không yêu cầu jQuery. Nhưng nghiêm túc mà nói, những ngày này ai không sử dụng 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");

    });
});

CHƯA được thử nghiệm với các ký tự nhiều byte quốc tế, vì vậy tôi không chắc nó hoạt động như thế nào với những ký tự đó chính xác.

— Simon East
nguồn

2

Cũng thêm sự kiện sau để xử lý việc dán vào vùng văn bản:

...

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
nguồn

Ai đó có thể thêm điều này vào nội dung câu trả lời nếu họ nghĩ rằng nó ổn? Chưa có đủ điểm để làm điều đó.

— stusherwin

Chức năng dán không được chuẩn hóa. Tôi tin rằng nó chỉ hoạt động trong IE.

— Josh Stodola

Tôi đã cập nhật câu trả lời của mình để xử lý tình huống dán. Cảm ơn bạn!

— Josh Stodola

2

Thuộc tính maxlength được hỗ trợ trong Internet Explorer 10, Firefox, Chrome và Safari.

Lưu ý: Thuộc tính maxlength của <textarea>thẻ không được hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn hoặc trong Opera.

từ HTML maxlength Attribute w3schools.com

Đối với IE8 hoặc các phiên bản cũ hơn, bạn phải sử dụng như sau

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

Thuộc tính maxlength của <input>thẻ được hỗ trợ trong tất cả các trình duyệt chính.

từ HTML maxlength Attribute w3schools.com

— Eason
nguồn

1

Giải pháp tốt hơn so với việc cắt bớt giá trị của vùng văn bản.

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

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

— Bharat
nguồn

1

Bạn có thể sử dụng jQuery để làm cho nó dễ dàng và rõ ràng

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>

Nó được thử nghiệm Firefox, Google ChromevàOpera

— MaxEcho
nguồn

Tôi sợ rằng khi trình xử lý được thực thi, textđược lấp đầy bằng "giá trị" của texarea trước khi nó được cập nhật. Điều này có nghĩa là thử nghiệm của bạn nên được if( text.length +1 > maxlength) {return false;}. Nếu không, người ta sẽ chỉ có thể đặt các maxlength - 1ký tự bên trong:/

— Stphane

Fiddle của bạn cho phép người dùng nhập thêm một ký tự. IMO, bài kiểm tra của bạn phải là if(text.length+1 > maxlength)hoặc if(text.length >= maxlength)...

— Stphane

Nó không làm việc như mong đợi khi tôi sao chép và dán nội dung

— Ranjit Kumar

0

Một vấn đề nhỏ với đoạn mã trên là val () không kích hoạt sự kiện change (), vì vậy nếu bạn sử dụng backbone.js (hoặc một khung công tác khác để liên kết mô hình), mô hình sẽ không được cập nhật.

Tôi đang đăng giải pháp làm việc tuyệt vời cho tôi.

$(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
nguồn

0

Gần đây, tôi đã triển khai maxlengthhành vi textareavà gặp sự cố được mô tả trong câu hỏi này: Chrome đếm sai ký tự trong vùng văn bản với thuộc tính maxlength .

Vì vậy, tất cả các triển khai được liệt kê ở đây sẽ hoạt động ít lỗi. Để giải quyết vấn đề này, tôi thêm vào .replace(/(\r\n|\n|\r)/g, "11")trước .length. Và luôn ghi nhớ điều đó khi cắt dây.

Tôi đã kết thúc với một cái gì đó như thế này:

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

Không chắc liệu nó có giải quyết được vấn đề hoàn toàn hay không, nhưng nó phù hợp với tôi bây giờ.

— Roman Pominov
nguồn

0

Hãy thử jQuery này hoạt động trong IE9, FF, Chrome và cung cấp bộ đếm ngược cho người dùng:

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

0

Hãy thử sử dụng ví dụ mã này:

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

— naveen
nguồn

-1

Điều này dễ dàng hơn nhiều:

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

Mở rộng đoạn mã

— erdomester
nguồn

2

Lưu ý rằng giải pháp này không tái tạo hoàn toàn maxlengthvì bạn có thể dán các chuỗi dài hơn độ dài mong muốn.

— Chris Bier