检测输入(type = text)元素中的文本是否超出FireFox中的边界

Question

有没有办法检测输入(type = text)元素的内容(值)是否超过其大小？

在Internet Explorer中,scrollWidth属性将大于style.width此时的属性.但是在Firefox中,scrollWidth总是等于style.width并且是一个已知的错误(https://bugzilla.mozilla.org/show_bug.cgi?id=343143),也许不是bug,因为Mozilla根本不认为输入元素是"可滚动的" ,但仍然.根据这种观点,Firefox的textarea元素scrollWidth在内容溢出边界时正确设置属性.

目前,我唯一的想法是:(a)使用textarea元素,并以某种方式将其限制为单行输入或(b)在输入的每个keyup事件中,将内容复制到类似形状的div元素并查看其scrollWidth属性.

在FF中有没有更好的方法来实现这一目标？

Answer 1

如果你以像素为单位测量字符串的长度怎么办？然后你可以比较输入的宽度.
以下是如何使用jquery获取字符串的像素长度:在Javascript/jQuery中确定字符串的像素长度？.
我会做的事情如下:

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;
}