javascript - 如何获取输入文本的宽度(不是输入框)

标签 javascript jquery html css input

<分区>

我想知道输入框实际文字的宽度,而不是输入框的宽度。有没有等同于

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

准确测量文本占用多少像素? (这段代码显然行不通。)

最佳答案

像这样

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

关于javascript - 如何获取输入文本的宽度(不是输入框),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23094146/

上一篇:javascript - javascript无法调用CSS3动画

下一篇:html - 单选按钮更改 CSS 背景颜色或背景图像(没有标签的简单代码)

相关文章:

javascript - 在reactJS中按字母顺序排序

javascript,编辑代码图像值检查器

javascript - 当鼠标在框上时停止动画并在鼠标移出时将其动画回来,不起作用

javascript - fadeTo 在 ie10 中不起作用

javascript - 每个字母点击一次

javascript - tinymce 中的 &lt;input&gt; 元素

javascript - highcharts - 圆环图 - 内部和外部标签

javascript - 如何使用 JQuery 捕获用户输入的文本?

javascript - Turn.js 更多控件制作按钮

html - 如何像这样对齐我的 div?