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