テキストフィールド幅auto width |まず、行を削除する前に水平スペースを取る

Question

テキストフィールドに、ユーザーのタイプに応じて拡大する自動幅を設定して、親の幅に達するまでドロップダウン（および高さを拡張）する方法を教えてください。
width：autoは何らかの理由で動作しないようです。

ありがとうございました。

Answer 1

input要素ではできないと思っていますが、あなたはそれを騙すことができます。

フォークオンCodepenです。

$(".nice-input").keyup(function(){ 
 
    if($(`input[nice-rel="${$(this).attr("id")}"]`).length > 0) { 
 
     $(`input[nice-rel="${$(this).attr("id")}"]`).val($(this).text()); 
 
    } 
 
});

.container { 
 
    width: 120px; 
 
    background-color: #f5f5f5; 
 
    border: 1px solid #ededed; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
} 
 
.container .input { 
 
    font: sans-serif; 
 
    display: inline-block; 
 
    outline: none; 
 
    width: auto; 
 
    min-width: 50px; 
 
    border-bottom: 1px solid #000; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <span class="input nice-input" id="main" contenteditable="true"></span> 
 
</div> 
 
<input type="text" nice-rel="main" placeholder="Hide this element" disabled/>

Answer 2

HTML：

<div class="parent"> 
    <textarea></textarea> 
</div> 

CSS：

.parent { 
    width: 300px; 
    height:300px; 
    background-color: black; 
} 

textarea { 
    width: 110px; 
    max-width: 100%; 
    max-height: 100%; 
    overflow: hidden; 
    outline: none; 
    background-color: white; 
} 

のjQuery：

$("textarea").keypress(function() {  
    // Increases the length of textarea 
    $("textarea").css({ 
     'width' : $(this).width() + 10 
    }); 

    // Increases the height when textarea width reaches maximum length 
    if ($(this).width() >= $(this).parent().width()) { 
     $(this).css({ 
      'height' : $(this).height() + 20 
     }) 
    } 
} 

これをチェックアウトJSFiddle

ほとんど同じように説明されています。テキスト領域内のコンテンツの幅を決定する方法を誰かが見つけた場合、目標を達成するでしょう。今のところ、あなたたちはこれを踏み台として使うことができます。