10/10/2018, 00:11

Count lines in Textarea

Bác nào có giải pháp hay cho việc đếm số dòng trong 1 textArea không nhỉ ? Vấn đề này trước giờ ko để ý, cứ tưởng đơn giản, ai ngờ nan giải phết đấy các bác ạ ! Sao chúng ta còn chưa thảo luận nhỉ

PHP Code:


<form name="f">

  <textArea 

   name="t" 

   id="t"   

    style="width:400px;height:200px;overflow:auto;"

   onkeyup="getVal();">

  </textArea>

</form>



<script>

function countLine(){

  var t=document.f.t.value;

  return (t==') ? '0' : (t.split("
").length);

}

</script>

PS :

Đã thử thay bằng ; ... nhưng không giải quyết được. Số dòng chỉ tăng khi người dùng gõ Enter.
Đã thử các giá trị khác nhau của WRAP (off, phisycal, virtual) đều không mang lại kết quả mong muốn.

s.code viết 02:14 ngày 10/10/2018

Chả hiểu ông này muốn gì. Tôi test thấy tốt mà. Cả gõ, copy => paste

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="padding-bottom: 10px; font-weight: bold">Số dòng là: <span id="abc"></span></div>
<form name="f">
  <textArea 
   name="t" 
   id="t"   
    style="width:400px;height:200px;overflow:auto;"
   onkeyup="getVal();">
  </textArea>
</form>

<script>
function getVal()
{
	document.getElementById('abc').innerHTML = countLine();
}
function countLine(){
  var t=document.f.t.value;
  return (t=='') ? '0' : (t.split("\n").length);
}
</script
</body>
</html>

sacroyant viết 02:12 ngày 10/10/2018

Thế bác dùng con gì để mở nó, FF, OP hay IE

Tui test trên IE 7, Netscape 9, FF 2, FF 3, Opera 8. Không thằng nào được.

Khi copy paste thì bác lưu ý không copy ký tự nhảy dòng nhé. Chỉ chọn chuỗi trong 1 hàng, có khoảng trắng nữa. Khi chiều dài chuỗi paste xuống lớn hơn bề ngang, một phần chuỗi sẽ được đẩy xuống dòng mà không tạo ra dòng mới. Javascript không ghi nhận được có new line. Vấn đề ở đó.

jiSh@n viết 02:13 ngày 10/10/2018

Được gửi bởi sacroyant

Cái đó cũng có phải là new line đâu Tính năng word wrap đẩy xuống cho dễ nhìn chứ thật ra vẫn là 1 hàng thôi mà. Trong cấu trúc DOM cũng ko có thuộc tính nào phục vụ việc này.
Thực ra về lý thuyết có 1 cách có thể tính được :

Code:

lines = textarea.scrollHeight / (textarea.clientHeight/textarea.rows)

Tuy nhiên, thực tế cái textarea.rows ko phản ánh đúng số dòng nhìn thấy được của textarea. Nguyên nhân là do sự khác biệt về kích thước font chữ bên trong textarea, do CSS override...

sacroyant viết 02:13 ngày 10/10/2018

@ jiSh@n :

Cảm ơn ý kiến của bác.

Tôi đang tìm cách kết hợp với kích thước chữ quy định trước trong CSS để tính. Nhưng lại có vấn đề : 1 dòng chứa 100 chữ "I" chỉ có thể chứa được khoảng 50 chữ "M"

Để tôi nghiên cứu thuộc tính textarea.rows bác đưa xem sao.

jiSh@n viết 02:16 ngày 10/10/2018

Được gửi bởi sacroyant

Kích thước font tính theo pixel thì lấy rất dễ, nhưng quan trọng là cái kích thước đó ko phản ánh đúng chiều cao của text mới khổ Cùng 1 size nhưng font khác nhau lại cho ra chiều cao text khác nhau Cái rows là 1 thuộc tính của textarea mà, cùng với cols để quy định kích thước của textarea. Bị CSS định dạng thì cols và rows vứt đi

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

sacroyant

0 chủ đề

0 bài viết

Tác giả nổi bật