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获取字符串像素长度的方法：Determine Pixel Length of String in 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;
}

Answer 2

我知道这是一个古老的问题，但也许这对某些人有帮助。如果输入的文本宽于输入的宽度，jQuery将触发“滚动”事件。不幸的是，如果使用JavaScript将文本注入到输入中，则不会触发'scroll'事件。此外，如果用户缩小文本，此示例不会缩小输入。

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

编辑：我刚刚意识到只有当光标超出输入边缘时才会触发滚动事件。

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

2 个答案: