Sử dụng jQuery để thay thế hộp văn bản bằng <textarea> sau độ dài ký tự nhất định

Question

Tôi đang sử dụng mã đơn giản bên dưới để thay thế hộp văn bản (<input type=text />) bằng phần tử <textarea> sau khi người dùng nhập một số ký tự nhất định. Trong ví dụ bên dưới, điều này diễn ra sau ký tự thứ 10. Mã hoạt động, ngoại trừ nội dung của <textarea> bỏ qua ký tự thứ 10 mà người dùng đã nhập. Ví dụ: nếu bạn nhập "thử nghiệm 1234" trong hộp văn bản, vùng văn bản sẽ bỏ qua "4". Bất kỳ ý tưởng? Cảm ơn. --Jake

$('.info').keypress(function() { 
    var count = $(this).val().length; 
    if (count > 10) 
    { 
     var contents = $(this).val(); 
     $(this).after('<textarea></textarea>').next().val(contents).end().remove() 
    } 
}) 

CẬP NHẬT: Tôi đã thử đề xuất mà nhiều bạn đã chia sẻ: sử dụng sự kiện keyup. Nó hoạt động, nhưng chỉ khi bạn gõ chậm. Nếu bạn là một typer nhanh, như tôi nghi ngờ hầu hết mọi người ở đây sẽ là, nhân vật thứ 10 vẫn bị bỏ qua khi sử dụng sự kiện keyup.

Answer 1

Có lẽ bạn nên sử dụng textarea ngay từ đầu, chỉ tăng thêm thuộc tính "hàng". Tôi muốn sẵn sàng đặt cược bạn muốn duy trì tất cả các ký tự của bạn sau khi thay đổi và nó sẽ hoạt động giống như một hộp văn bản với hàng = "1".

$('.info').keypress(function() { 
    var count = this.value.length; 
    if (this.rows == 1 && count > 10) 
    { 
     this.rows = 4; // Or whatever you'd prefer. 
    } 
}); 

Answer 2

Thay đổi sự kiện thành keyup thay vì keypress.

Answer 3

Còn việc sử dụng keyup thay vì keypress thì sao? Điều đó kích hoạt hành động sau khi khóa được giải phóng (và ký tự đã được gõ).

Answer 4

Hãy thử sử dụng các sự kiện KeyUp

$('.info').keyup(function() { 
    var count = $(this).val().length; 
    if (count > 10) 
    { 
     var contents = $(this).val(); 
     $(this).after('<textarea></textarea>').next().val(contents).end().remove() 
    } 
}) 

Answer 5

Thay vì sử dụng bấm phím sử dụng KeyUp. theo cách đó, nó cho phép thay đổi dữ liệu đã nhập trước khi thay đổi xảy ra với vùng văn bản. điều này sẽ ngăn chặn các char cuối cùng khỏi bị giảm

Answer 6

Line 1 (chú ý đối số):

$('.info').keypress(function(e) { 

Dòng 5:

var contents = $(this).val() + String.fromCharCode(e.keyCode); 

Answer 7

Hãy thử sử dụng KeyUp thay vì bấm phím. Nhưng tôi nghĩ những gì Neil gợi ý là một cách tiếp cận tốt hơn.

Answer 8

Neil's answer có lẽ là cách tiếp cận tốt nhất. Tuy nhiên, nếu bạn muốn thay thế đầu vào bằng textarea, bạn có thể sử dụng jQuery replaceWith() (được đề xuất trong câu trả lời đã bị xóa của patrick_dw), nhưng bạn nên tránh sử dụng các sự kiện như keyup.

Tôi đã viết một plugin trong một thời gian ngắn trước đây sẽ xử lý nhập văn bản tốt hơn nhiều so với keypress, keyup và keydown sự kiện. Sự kiện HTML5 oninput được thiết kế để xử lý tất cả các kiểu nhập văn bản, như dán, kéo và thả, sửa lỗi chính tả, v.v. My plug-in làm cho trình duyệt chéo này trở thành sự kiện.

$('.info').input(function() { 
    var count = $(this).val().length; 
    if (count > 10) { 
     $(this).replaceWith('<textarea>', {value: this.value}); 
    } 
}); 

Ngoài ra còn có a blog post nêu tại sao bạn không nên sử dụng sự kiện quan trọng để phát hiện đầu vào.

Answer 9

Khi sự kiện được xử lý bởi chức năng của bạn, ký tự chưa được nhập vào hộp. Nhìn vào đối tượng sự kiện được chuyển đến hàm javascript và nối thêm ký tự đã kích hoạt nó.