检测输入 (type=text) 元素中的文本是否超出 FireFox 中的范围答案

【问题标题】：Detect if text in an input (type=text) element exceeds bounds in FireFox检测输入 (type=text) 元素中的文本是否超出 FireFox 中的范围
【发布时间】：2011-06-17 14:14:37
【问题描述】：

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

在 Internet Explorer 中，如果为真，scrollWidth 属性将大于 style.width。然而，在 Firefox 中，scrollWidth 总是等于 style.width 并且是一个已知的错误（https://bugzilla.mozilla.org/show_bug.cgi?id=343143），可能不是错误，因为 Mozilla 根本不认为输入元素是“可滚动的”，但仍然如此。根据这一观点，Firefox 的 textarea 元素确实在内容溢出边界时正确设置了 scrollWidth 属性。

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

在 FF 中是否有更好的方法来实现这一点？

【问题讨论】：

如何比较字符串的length和文本框的size属性？
@jnpcl - 只有在 input 元素上未使用固定宽度字体和 css 样式时，这才有效。对于可变宽度字体或要显式定义input 元素宽度的情况（例如style="width:100px;"），仅检查长度是不够的。

标签： javascript html firefox dom input

【解决方案1】：

如果以像素为单位测量字符串的长度会怎样？那么您可以将输入的宽度与它进行比较。
以下是如何使用 jquery 获取字符串的像素长度：Determine Pixel Length of String in Javascript/jQuery?。
我会做类似的事情：

函数输入超出（el）{ var s = $(''+el.val()+''); s.css({ 位置：'绝对'，左：-9999，顶部：-9999， // 确保 span 与元素具有相同的字体属性 'font-family' : el.css('font-family'), '字体大小' : el.css('字体大小'), '字体重量' : el.css('字体重量'), '字体样式' : el.css('字体样式') }); $('body').append(s); var 结果 = s.width() > el.width(); //删除新创建的span s.remove(); 返回结果； }

【讨论】：

我喜欢这个答案，但知道这个解决方案有多可靠吗？我不知道 jQuery 的 width() 函数在看什么（CSS 的 style.width、offsetWidth、clientWidth 等），但我知道某些 CSS 属性除非设置，否则不会有值。跨度>

【解决方案2】：

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

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

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

【讨论】：