Javascript获取距边框像素的距离的textarea的内容

Question

如何确定输入框中的文字，左框中的像素数？它可能有utf8，中文

Answer 1

这可能不是最好的方法，但我想这可能是一个开始。这将返回输入元素中剩余的像素数：

function getRemainingWidth(element){
    var span = $('<span class=\"'+$(element).attr('class')+'\" style=\"visibility:hidden;\">'+$(element).val()+'</span>');
    $(document.body).append(span);
    var diff = $(element).width() - $(span).width();
    $(span).remove();
    return diff;
}

Answer 2

一种方法是创建span元素并将文本添加到其中。但是有一个问题：你必须将它添加到dom中以获得它：

var sYourText = 'asdfafdsa, dzcvxvxc';
var oText = document.createElement('span');
oText.innerHTML = sYourText;
document.getElementsByTagName('body')[0].appendChild(oText)
console.log(oText.offsetWidth);

当然：请务必使用与textarea相同的字体。

Answer 3

$("textarea").keyup(function(){
                var s = $(this).val()
                var data = s.replace(/(\s)/g,' ')
                console.log(data)
                $('span').html(data)
            })

我用替换的常规空格替换它，但包装可能需要使用CSS的问题