HTML/CSS/JS: Làm thế nào để tạo ảo ảnh về một vùng văn bản với số dòng?

Question

Tôi muốn có một vùng văn bản hiển thị số dòng ở bên trái. Bọc phải được đặt thành "tắt" (để cuộn ngang có sẵn). Tôi muốn có trang của tôi như là một tập tin duy nhất .html duy nhất (sẽ không có đồ họa), vì vậy tôi muốn tránh bất kỳ khuôn khổ của bên thứ 3.

Tôi nên đi theo cách nào? Bạn sẽ làm điều này như thế nào?

Answer 1

Tôi nghĩ rằng đặt cược tốt nhất của bạn là chỉ có một vùng văn bản thông thường và hiển thị bản xem trước (như tràn ngăn xếp) khi chúng nhập cùng. Trong bản xem trước đó, bạn có thể dễ dàng thêm số dòng trên mỗi dòng và định dạng giao diện thông qua CSS.

Answer 2

Bạn sẽ phải bao quanh vùng văn bản và chụp các tổ hợp phím tìm các ký tự dòng mới (ví dụ ENTER). Thực hiện tìm kiếm nhanh trên Google và bạn nhận được http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506

Answer 3

Cá nhân tôi chỉ có văn bản thông thường và div ở bên trái hiển thị số (có thể tự động điều chỉnh khi có thêm số lần chuyển hàng).

Answer 4

Một phương pháp đơn giản khác là tạo hình nền hẹp, nhưng cao và một số đệm trái trên vùng văn bản. Điều này có báo trước nhỏ về việc có một số hàng cố định và kiểu phông chữ, nhưng đó là tùy chọn có số lượng mã ít nhất được yêu cầu.

Answer 5

Không có hình ảnh, đó là một hình ảnh khó khăn.

Đặt cược tốt nhất: Đặt văn bản thứ hai với cài đặt giống hệt (cỡ chữ, chiều cao dòng, đệm ...) nhưng kiểu khác nhau (không có màu nền, không viền) ở bên trái của vùng văn bản gốc. Làm cho nó chỉ đọc, mang nó ra khỏi vòng xoay tab (tabindex=99999 có thể làm các thủ thuật hoặc chỉ đơn giản là vô hiệu hóa nó), và đặt số dòng trong đó. Điều này sẽ làm việc tốt và chính xác như xa như tôi có thể nghĩ, nó thậm chí nên tồn tại những thứ như khách hàng thay đổi kích thước phông chữ bằng tay trong trình duyệt của họ.

Bạn thậm chí có thể sử dụng position: relative và giá trị padding-left: lớn trong vùng văn bản gốc để di chuyển văn bản phản đối vào văn bản gốc.

Nhược điểm: Bộ đếm dòng sẽ không theo dõi di chuyển dọc của vùng văn bản. Xem các bình luận bên dưới.

Answer 6

Tôi sẽ bắt đầu với hai vùng văn bản và cơ chế đồng bộ hóa. Something như thế này,

<script> 
    window.sync = function(e){ 
      var textarea = document.getElementById("lines"); 
      var source = document.getElementById("some_text_area"); 
      textarea.scrollTop = source.scrollTop; 
     } 

     window.populate = function populate(){ 
      if(populate.started){ 
       return; 
      } 

      populate.started = true; 
      var textarea = document.getElementById("lines"); 
      var str = ''; 
      for(var i=0;i < 100;i++){ 
       str = str + (i +'\r\n'); 
      } 
      textarea.value = str; 
     } 
    </script> 

<div> 
<textarea 
    style="width:40px;overflow:hidden;height:40px;" 
    readonly="true" 
    id="lines" 
></textarea> 
<textarea 
    style="width:500px;height:40px;" 
    id="some_text_area" 
    onclick="populate()" 
    onscroll="sync();" 
></textarea> 
</div> 

Ofcourse populate() chức năng (và tuyên bố phong cách và tuyên bố sự kiện) nên mạnh mẽ hơn và thông minh, nhưng, nó chỉ cho mục đích giới thiệu.