如何使用javaScript或jQuery獲取文本輸入內容寬度

Question

我有一個<input type="text" />標記。

可能內容太多，當內容長度超過輸入寬度時，會水平滾動。

事實上，我想控制標籤的寬度，使其根據內容而變化。

那麼，有什麼辦法可以獲得標籤的內容寬度？類似於scrollHeight屬性？

Answer 1

檢查了這一點

http://jsfiddle.net/philfreo/MqM76/

$.fn.textWidth = function(text, font) { 
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body); 
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font')); 
    return $.fn.textWidth.fakeEl.width(); 
}; 

Calculating text width

Answer 2

您可以使用$("#chkText").on('input', function(){});如下

JSFiddle Here

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#chkText").on('input', function() { 
      var lng = $("#chkText").val().length; 
      $("#chkText").width(lng * 10); 
     }); 
    }); 
</script> 

HTML

<input type="text" id="chkText"/> 

Answer 3

嘗試調整長度onkeypess或的onkeyup：

甲onkeypress事件的例子。 onkeypress =「this.style.width =（（this.value.length + 1）* 5）+'px';」

這應該工作，如果你把它放入輸入標籤。我認爲定義最小/最大寬度將會很好。