Phát hiện xem văn bản trong phần tử đầu vào (loại = văn bản) có vượt quá giới hạn trong FireFox

Question

Có cách nào để phát hiện xem nội dung (giá trị) của phần tử đầu vào (loại = văn bản) có vượt quá kích thước của nó không?

Trong Internet Explorer, thuộc tính scrollWidth sẽ lớn hơn style.width khi điều này đúng. Tuy nhiên, trong Firefox, scrollWidth luôn bằng style.width và là một lỗi đã biết (https://bugzilla.mozilla.org/show_bug.cgi?id=343143), cũng có thể không phải lỗi vì Mozilla chỉ đơn giản là không xem xét yếu tố đầu vào là "có thể cuộn" được, nhưng vẫn còn. Theo ý kiến ​​này, yếu tố textarea của Firefox KHÔNG đặt thuộc tính scrollWidth đúng cách khi nội dung tràn các giới hạn.

Hiện nay, suy nghĩ duy nhất của tôi là một trong hai: (a) Sử dụng một yếu tố textarea để thay thế và hạn chế nó để nhập dòng duy nhất bằng cách nào đó hoặc (b) Trên mỗi sự kiện KeyUp của đầu vào, sao chép nội dung vào một tương tự hình div yếu tố và nhìn vào tài sản scrollWidth của nó.

Có cách nào tốt hơn để thực hiện việc này trong FF không?

Answer 1

điều gì sẽ xảy ra nếu bạn đo độ dài của chuỗi theo pixel? sau đó bạn có thể so sánh chiều rộng của đầu vào với nó.
Dưới đây là cách bạn có thể nhận được độ dài pixel của chuỗi bằng jquery: Determine Pixel Length of String in Javascript/jQuery?.
tôi sẽ làm một cái gì đó như:

 
function inputExceeded(el){ 
    var s = $('<span >'+el.val()+'</span>'); 
    s.css({ 
     position : 'absolute', 
     left : -9999, 
     top : -9999, 
     // ensure that the span has same font properties as the element 
     'font-family' : el.css('font-family'), 
     'font-size' : el.css('font-size'), 
     'font-weight' : el.css('font-weight'), 
     'font-style' : el.css('font-style') 
    }); 
    $('body').append(s); 
    var result = s.width() > el.width(); 
    //remove the newly created span 
    s.remove(); 
    return result; 
} 

Answer 2

Tôi biết đây là một câu hỏi cũ-ish, nhưng có lẽ điều này sẽ giúp một ai đó. jQuery sẽ kích hoạt sự kiện 'cuộn' nếu văn bản được nhập rộng hơn chiều rộng của đầu vào. Thật không may, sự kiện 'cuộn' không kích hoạt nếu văn bản được đưa vào đầu vào bằng JavaScript. Ngoài ra, ví dụ này không thu hẹp đầu vào nếu người dùng giảm văn bản.

$('input[type=text]').on('scroll.input-expander', function(event, element){ 
    $(this).css('width','100%'); 
    $(this).unbind('scroll.input-expander'); 
}); 

Chỉnh sửa: Tôi vừa nhận ra rằng sự kiện cuộn chỉ được kích hoạt khi con trỏ vượt ra ngoài mép đầu vào.