Как получить ширину вводимого текста (не поля ввода) [дубликаты]

Question

Как получить ширину вводимого текста (не поля ввода) [дубликаты]

0

Я хочу знать ширину фактического текста в поле ввода, а не в поле ввода. Существует ли эквивалент

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

который точно определяет, сколько пикселей занимает текст? (Этот код, очевидно, не сработает.)

mango 15 апр. 2014, в 23:25

Источник

0

Вы пытались поместить текст в невидимый элемент и измерить это?
Mathias 15 апр. 2014, в 20:46

Теги:

javascript

jquery

html

css

input

2 ответа

Ещё вопросы

Вы пытались поместить текст в невидимый элемент и измерить это?

adeneo · Answer 1 · 2014-04-15T19-15-00.000Z

Что-то вроде этого

$('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

Stefan · Answer 2 · 2014-04-15T17-59-00.000Z

Получил это отсюда: вычислить ширину текста с помощью 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();