Определить, превышает ли текст в элементе input (type = text) границы в FireFox

Question

Есть ли способ определить, превышает ли содержимое (значение) элемента input (type = text) его размер?

В Internet Explorer свойство scrollWidth будет больше, чем style.widthкогда это правда.В Firefox, однако, scrollWidth всегда равно style.width и является известной ошибкой (https://bugzilla.mozilla.org/show_bug.cgi?id=343143), что, возможно, не ошибка, поскольку Mozilla просто не считает элемент ввода «прокручиваемым», но все же.В соответствии с этим мнением, элемент textarea в Firefox правильно устанавливает свойство scrollWidth, когда содержимое выходит за границы.

В настоящее время я думаю только о том, чтобы: (a) использовать вместо него элемент textarea иограничить его однострочным вводом или (b) при каждом событии keyup ввода скопировать содержимое в элемент div аналогичной формы и посмотреть его свойство scrollWidth.

Есть ли лучший способ выполнитьэто в фф?

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

Answer 2

Я знаю, что это старый вопрос, но, возможно, это кому-нибудь поможет. jQuery вызовет событие «прокрутка», если введенный текст шире, чем ширина ввода. К сожалению, событие «прокрутка» не срабатывает, если текст вводится с помощью JavaScript. Кроме того, этот пример не сокращает ввод, если пользователь уменьшает текст.

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

Edit: Я только что понял, что событие прокрутки срабатывает только тогда, когда курсор выходит за край ввода.