jquery tự động phát triển vùng văn bản so với văn bản ban đầu

Question

Có một plugin jquery rất đơn giản: autotextarea. Tôi muốn dạy cho nó một mẹo nhỏ mới: để thay đổi kích thước ban đầu để bù cho văn bản được cung cấp trong biểu mẫu, thay vì đợi lần nhấn phím đầu tiên. Linh hồn nào đó có thể vui lòng cho tôi biết loại xử lý nào để thêm vào nó ngoài việc onkeyup?

Đây là plugin in question. Chỉ cần thêm một cuộc gọi để phát triển (điều này) để chức năng khởi tạo không hoạt động - rõ ràng, tại thời điểm nó được gọi là, bố trí không hoàn thành, và chiều rộng hiệu quả là nhỏ, vì vậy họ nhận được quá nhiều cao. Đây là phiên bản sửa đổi của tôi: thay đổi duy nhất là cuộc gọi đến grow.

//Public Method 
jQuery.fn.autoGrow = function(){ 
    return this.each(function(){ 
     setDefaultValues(this); 
     grow(this); 
     bindEvents(this); 
    }); 
}; 

EDIT:

Chạy này tại document.ready() không làm việc, vì cols thuộc tính của textarea không tính toán được nêu ra. Tuy nhiên, tôi đã nghĩ ra điều gì đó, và có lẽ bạn có thể giúp tôi dọn dẹp nó. Thay vì chú ý đến cols, tôi sử dụng $ (txtArea) .width(), và sau đó chia cho độ rộng của một div ẩn chứa một ký tự điển hình. Tất cả là tốt, ngoại trừ sự cần thiết phải đặt div ẩn trên mỗi trang. Có bất kỳ đề xuất cho sản xuất hoặc obviating div đó?

tiêu biểu vùng văn bản HTML:

<textarea name="text[0]">歐洲 聯盟 研究 論壇 研討會 議程表 主題 : 歐盟 新憲 的 困境 與 挑戰 日期 : 九十四 年 九月 二日 (星期五) 09 : 00~ 13 : 30 地點 : 台北市 福華 大 飯店 四 樓 CR 403 (台北市 仁愛路 三 段 160 號) 主辦 單位 : 歐洲 聯盟 研究 論壇 (European Union Research Forum , EURF) 國立 政治 大學 國際 關係 研究 中心 起迄 時間 流程09 : 00 -09 : 10 報 到 09 :10 -09 : 20 開場 林碧炤 (政治 大學 副校 長) 9 : 20 - 10 : 20 第一 場 : 歐盟 公投 後 的 衝突 主持人 尤清 (立法委員) 引言人 1. </textarea> 

Và CSS liên quan:

textarea { 
    width: 100%; 
    font-family: Arial, simsun; 
    font-size: 16px; 
} 

Answer 1

Tôi không chắc chắn chính xác cách thức các plugin hoạt động, nhưng điều này có thể là một giải pháp make-shift.

Sau khi bạn đặt văn bản tự động phát triển, tự động thêm ký tự vào vùng văn bản để nó sẽ kích hoạt plugin, sau đó xóa ký tự. Hoặc bạn có thể cần phải mô phỏng một phím bấm, một trong hai.

Hãy cho tôi biết nếu bạn cần một ví dụ về mã.

Answer 2

Bạn có thể làm cho hoạt động này khi bố trí là hoàn chỉnh như vậy:

$(document).ready(function() { 
    // Code to run once document is ready 
}); 

Hoặc bạn có thể sử dụng các ký hiệu viết tắt, mà làm điều tương tự:

$(function(){ 
    // Code to run once document is ready 
}); 

Chỉ cần quấn nó bên trong hai dòng đó và nó sẽ hoạt động.

Answer 3

Tôi nghĩ rằng tôi thấy vấn đề của bạn ... bạn cần xác định các hàng và cols trong textarea:

<textarea rows="5" cols="40" name="text[0]">歐洲 聯盟 研究 論壇 研討會 議程表 主題 : 歐盟 新憲 的 困境 與 挑戰 日期 : 九十四 年 九月 二日 (星期五) 09 : 00~ 13 : 30 地點 : 台北市 福華 大 飯店 四 樓 CR 403 (台北市 仁愛路 三 段 160 號) 主辦 單位 : 歐洲 聯盟 研究 論壇 (European Union Research Forum , EURF) 國立 政治 大學 國際 關係 研究 中心 起迄 時間 流程09 : 00 -09 : 10 報 到 09 :10 -09 : 20 開場 林碧炤 (政治 大學 副校 長) 9 : 20 - 10 : 20 第一 場 : 歐盟 公投 後 的 衝突 主持人 尤清 (立法委員) 引言人 1. </textarea> 

Nếu không có những thiết lập, tôi đã nhận được độ rộng cột mặc định và chiều cao hàng mặc định là -1.

Ngoài ra, bạn sẽ cần phải loại bỏ các width: 100% từ CSS vì nó sẽ mess lên các chức năng

---

Vâng, bởi vì tôi có OCD, tôi viết lại các plugin (demo).Bây giờ nó sẽ thêm một số gần đúng của cols vào văn bản dựa trên chiều rộng của cha mẹ của nó (nó hoạt động tốt nhất khi chiều rộng css textarea là 100%). Chỉ cần sao chép kịch bản từ phía bên trái của bản demo và lưu nó như một tập tin, gọi nó là như sau:

$(document).ready(function(){ 
    $("textarea").autoGrow(true); 
}); 

và chắc chắn rằng chiều rộng textarea cũng là 100% ... CSS cơ bản:

textarea { 
width: 100%; 
height: auto; 
overflow: hidden; 
font-family: Arial, simsun; 
font-size: 16px; 
} 

Hollar với tôi nếu bạn tìm thấy bất kỳ sự cố nào.