Làm thế nào để kiểm tra khi nào div thay đổi kích thước, sử dụng Javascript hoặc Jquery

Question

Vì vậy, tôi đã có một applcation web ở giữa wireframing, nhưng tôi đã chạy vào một vấn đề đòi hỏi một giải pháp kỹ thuật trước khi tôi có thể củng cố mô hình này; mà con người:. (. một div với max-width)

• Hình # 1 tài khoản tạo mới 'text-trường' yếu tố tài khoản sau đó bắt đầu gõ vào nói yếu tố cho đến khi ...

• hình. # 2 Yếu tố đạt nó max-width, các văn bản giảm xuống một dòng mới và một hình nền 'mới' (trong dạng div khác) được tạo ra (với opacity của nó và vị trí hoạt hình cho hiệu ứng) để chứa các phần tử lớn hơn s ze.

Đây là một phác thảo sơ bộ các chức năng dự định (cho tại thời điểm này, tôi không chắc chắn làm thế nào để có một văn bản-lĩnh vực mà hoạt động như một div với max-width chưa) nhưng Tôi tò mò về cách tạo trình xử lý sự kiện cho bước thứ hai; Tôi đã nghĩ đến việc kiểm tra mọi sự kiện 'chấm dứt', nhưng điều đó có vẻ không hiệu quả ...

Có ai có lời khuyên hay ý tưởng nào để giải quyết vấn đề như thế này không? Cảm ơn!

Answer 1

Trong MSIE, việc kích hoạt lại sẽ kích hoạt.

Answer 2

Sự kiện 'keydown' hoặc 'keyup' là điều đầu tiên bạn nghĩ đến. Nếu bạn quyết định làm theo cách này, bạn sẽ phải kiểm tra kích thước phần tử html mỗi lần và so sánh nó với biến số cũ (lưu trong biến).

Cách dễ nhất có vẻ là liên kết trình xử lý với phần tử html và để nó kích hoạt khi kích thước thay đổi. Tôi không biết nếu một sự kiện như vậy tồn tại, nhưng nếu đó là cách để đi.

(+1 cho Câu hỏi rất mô tả của bạn)

Answer 3

Bạn có thể thử bằng cách sử dụng chức năng chuyển tiếp CSS3:
http://slides.html5rocks.com/#slide42
Bằng cách đó các yếu tố bạn muốn có thể được sinh động bởi trình duyệt riêng của mình.

Tuyên bố từ chối trách nhiệm: Rõ ràng, điều này không hoạt động với các hiệu ứng phức tạp hơn.

Answer 4

Không chắc chắn cách tấn công vấn đề chiều rộng khi trường nhập tự động kích thước cho đến khi chiều rộng tối đa sau đó kết thúc tốt đẹp. Bạn có thể sử dụng một phông chữ monospace bên trong trường văn bản để bạn có thể sử dụng javascript để theo dõi và kiểm soát sự tăng trưởng của hộp theo chiều ngang tăng chiều rộng tối đa.

Để tiếp cận tự động phát triển chiều cao, bạn nên sử dụng textarea với nó được đặt thành một hàng để bắt đầu vì vậy nó trông giống như hộp nhập và sau đó văn bản tự động kết thúc đến hàng tiếp theo. bạn có thể kiểm tra scollHeight của textarea và kiểm tra chiều cao thực tế của textarea, trừ chúng và bạn nhận được chiều cao bạn cần để phát triển textarea để ngăn chặn các thanh cuộn dọc xuất hiện.

Ở trên sẽ làm cho các thanh cuộn bật và tắt một thời gian ngắn trong khi javascript của bạn thực hiện điều đó. Bạn có thể sử dụng overflow:auto; để ẩn các thanh cuộn nhưng sau đó tôi không biết nếu scrollHeight vẫn sẽ đọc chính xác. Bạn sẽ cần phải thử nghiệm.

Cũng lưu ý đến nhận xét của tôi ở trên về việc thiết lập khoảng thời gian khi nhấn phím và kiểm tra độ dài đầu vào để dừng sự cố văn bản từ khóa lặp lại.