Question

我想知道输入框中实际文本的宽度，而不是输入框。

是否相当于

$('#mybox').val().width();

可以准确测量文本占用的像素数量吗？（这段代码显然不起作用。）

Answer 1

像这样的东西

$('input').on('keyup', function() {
    var el = $('<div />', {
        text : this.value, 
        css  : {display : 'table-cell'}
    }).appendTo('body');

    var computedStyle = typeof this.currentStyle != 'undefined' ? 
            this.currentStyle : 
            document.defaultView.getComputedStyle(this, null);

    $.each(computedStyle, function(_, style) {
        if (style.indexOf('display') == -1 && style.indexOf('width') == -1)
            el.get(0).style[style] = computedStyle[style];
    });

    var w = el.prop('clientWidth');
    $(el).remove()

    $('#width_output').html(w + 'px')
});

FIDDLE

Answer 2

从这里得到这个：Calculate text width with JavaScript

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

现在你可以使用：

$('#mybox').val().width();

如何获取输入文本的宽度（不是输入框）

2 个答案: