Question

我设法写了一个角度指令（我已经将它提取到纯文章的jQuery中）来自动调整文本输入的宽度。

但是，输入字段的宽度似乎没有足够快地变化，因为内容来回滚动。

输入输入字段以便自己查看： Demo on 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仅在用户释放其键盘键时触发，因此只有在此之后，该字符才会添加到输入字段并且其内容大于其宽度。它导致你谈论的jiggeling。

您应该将input事件添加到侦听器事件列表中。每次在输入字段中更改字符时，都会触发此事件，仅由新浏览器支持。

您可以查看有关输入字段更改事件的answer以了解详情。

自动调整文本输入宽度时防止抖动

1 个答案: