自動調整文本輸入的寬度時防止抖動

Question

我設法編寫了一個角度指令（我已將其提取到本文的純jQuery中）以自動調整文本輸入的寬度。

但是，由於內容來回滾動，似乎輸入字段的寬度變化不夠快。

鍵入輸入字段以自己查看： JSFiddle上的演示

這是代碼：

var $element = $('#my-input');

// create dummy element to calculate text width in pixels
var dummy = $('<span></span>');
$('body').append(dummy);
dummy.css('visibility', 'hidden');

// apply all relevant text styling from our input element
dummy.css('fontFamily', $element.css('fontFamily'));
dummy.css('fontSize', $element.css('fontSize'));
dummy.css('fontWeight', $element.css('fontWeight'));
dummy.css('letterSpacing', $element.css('letterSpacing'));

var resize = function() {
    dummy.html($element.val().replace(/ /g, '&nbsp;'));
    $element.width(dummy.innerWidth() + 1); // it's 1px off for some reason
};

resize();
$element.on('keyup', resize);

如何防止這種情況發生？ 我已經嘗試過一些滾動輸入字段的嘗試，但是沒有成功。 有人有主意嗎？

Answer 1

該keyup當用戶釋放其鍵盤鍵您使用時，才會觸發，因此只有出該角色的輸入字段添加，其含量比寬度更大了。 它會引起您談論的笑話。

您應該將input事件添加到偵聽器事件列表中。 每當輸入字段中的字符發生更改時，都會觸發此事件（僅新瀏覽器支持）。

您可以檢查有關輸入字段更改事件的答案 ，以了解更多信息。