Đọc dòng mới trong textarea TRƯỚC KHI gửi biểu mẫu?

Question

Tôi có một vùng văn bản với thuộc tính wrap = "hard", có nghĩa là tôi sẽ có thể nhận được ngắt dòng (dòng mới) sau khi gửi đến máy chủ - công trình này. Nhưng những gì tôi muốn làm là lấy các dòng mới được tạo ra trước khi gửi.

Tại sao? Bởi vì tôi muốn đếm các hàng hiện đang hiển thị. Và bây giờ tôi KHÔNG nói về hàng trả về vận chuyển. Tôi đang nói về các hàng được tạo ra bằng cách giới hạn chiều rộng (hoặc thiết lập thuộc tính cols) của vùng văn bản.

Tôi có textbox này:

<textarea id="myarea" name="myarea" cols="35" rows="10" wrap="hard"> 
    Some example text here. Hello my name is something I should be able to blabla. 
</textarea> 

Output trong trình duyệt:
Một số ví dụ văn bản ở đây. Xin chào tôi tên là
điều gì đó tôi có thể làm blabla.

rows = 2

Tôi đã thử:..
$ ('# myarea') html() chia ("\ n") chiều dài
$ ('# myarea'). .val(). split ("< br> "). chiều dài
$ ('# myarea'). val(). split (" \ r"). chiều dài
Và một vài kết hợp thêm ...

Nhưng không có tác phẩm nào. Là những gì tôi yêu cầu thậm chí có thể mà không cần viết một kịch bản đếm từng nhân vật và sau đó tạo ra một dòng mới? Tôi đã hy vọng điều này sẽ xảy ra "tự động" ...

Nếu điều này là không thể, tại sao máy chủ có thể giải thích (tìm) các dòng mới, trong khi tôi không thể?

Cảm ơn!

Answer 1

Có vẻ như không có xây dựng trong các công cụ để có được giá trị này. Nhưng chúng ta có thể tính toán nó. Giả sử rằng chiều cao dòng trong vùng văn bản là một giá trị đã biết (bạn có thể xác định rõ ràng nó trong css). Vì vậy, các mã để tính toán số lượng hàng sẽ như thế này:

var area = $('#myarea').get(0); 

    //save the initial height of textarea 
    var initialHeight = area.style.height; 

    //set the height to 0 so scrollHeight will always return dynamic height 
    area.style.height = '0px'; 

    //here we assume that the line-height equals to 15 
    var numberOfRows = Math.floor(area.scrollHeight/15); 

    //restore textarea height 
    area.style.height = initialHeight; 

    console.log(numberOfRows); 

dụ làm việc http://jsfiddle.net/J5UpF/

CẬP NHẬT

Chỉ cần tìm ra các lỗi trong Chrome với mã của tôi. Tôi đã không tính đến thanh cuộn xuất hiện ở phía bên phải của vùng văn bản. Điều đó dẫn đến sai số dòng được tính toán đôi khi. Tuy nhiên nó hoạt động như một sự quyến rũ trong Firefox.Để khắc phục vấn đề này, chúng tôi phải tính toán sự khác biệt của độ rộng thanh cuộn và điều chỉnh độ rộng của textarea cho phù hợp:

var area = $('#myarea').get(0); 
var $area = $('#myarea'); 

//save the initial height of textarea 
var initialHeight = area.style.height; 

var scrollbarWidthInitial = area.offsetWidth - area.clientWidth; 

//set the height to 0 so scrollHeight will always return dynamic height 
area.style.height = '0px'; 

var scrollbarWidth = area.offsetWidth - area.clientWidth; 
var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial; 
$area.width($area.width() + scrollbarWidthDiff); 

//here we assume that the line-height equals to 15 
var numberOfRows = Math.floor(area.scrollHeight/15); 

//restore textarea height 
area.style.height = initialHeight; 
$area.width($area.width() - scrollbarWidthDiff); 

console.log(numberOfRows); 

cập nhật ví dụ http://jsfiddle.net/J5UpF/3/

UPDATE 2

Một lỗi tuyệt vời mới trong Chrome khám phá! Khi sử dụng thuộc tính placeholder, Chrome sẽ tính toán số hàng cho văn bản trình giữ chỗ. Cách giải quyết đơn giản: chỉ cần sao lưu thuộc tính giữ chỗ khi bạn nhập một số dữ liệu vào vùng văn bản và khôi phục nó khi dữ liệu bị xóa.

dụ Cập nhật http://jsfiddle.net/J5UpF/4/

Answer 2

Bạn có thể ràng buộc jquery trên nút gửi onClick, sau đó sử dụng

$('#myarea').val().split("\n").length