我認為沒有完美的解決方案，因為您無法檢測輸入到輸入元素的文本的實際寬度。這完全取決于您使用的字體，瀏覽器中的縮放設置等。

但是，如果可以選擇一種字體，在其中可以實際計算文本的像素數（這是最難的部分，但我想您可以嘗試以某種方式進行估算）。您可以使用它來更改輸入字段的寬度。

 $('input').keyup(function () {

     // I'm assuming that 1 letter will expand the input by 10 pixels

     var oneLetterWidth = 10;

     // I'm also assuming that input will resize when at least five characters

     // are typed

     var minCharacters = 5;

     var len = $(this).val().length;

     if (len > minCharacters) {

         // increase width

         $(this).width(len * oneLetterWidth);

     } else {

         // restore minimal width;

         $(this).width(50);

     }

 });

您好，我不知道您是否還在尋找，但是當我正在尋找一個腳本來做同樣的事情時，我遇到了這個問題。因此，希望這對嘗試這樣做的人有所幫助。

function editing_key_press(e){

    if(!e.which)editing_restore(this.parentNode);

    var text = $('<span>')

        .text($(this).val())

        .appendTo(this.parentNode);

    var w = text.innerWidth();

    text.remove();

    $(this).width(w+10);

}

此代碼的邏輯是將內容跨度放在頁面上，然后獲取此內容的寬度并將其刪除。我確實遇到的問題是我必須讓它同時在keydown和keyup上運行才能成功工作。

希望這會有所幫助，可能不會，因為我只是在短時間內進行jquery。