動的に増加する入力幅の例をデコードする

Question

ここでは、入力フィールドの幅をコンテンツに基づいて動的に増やす方法について、他のWebサイトや他のWebサイトで膨大な量の読み込みを行ってきました。すべてのソリューションは、これまでの一部のみに働いているが、私はそれが完璧に動作するWebサイトを発見した：

https://paper.fiftythree.com/search

彼らも、彼らはそれをやった方法として、いくつかのあいまいな指示を与えてくれた：

をhttp://making.fiftythree.com/fluid-text-inputs/

しかし私は自分の人生のために自分のウェブサイトでこれを実装する方法を考え出すことはできません。

これは、現時点では私のフォーム構造である：これを実行しようとしているため

<form action="/" class="search-form"> 
    <input type="text" name="s" class="_input" placeholder="What are you looking for?"> 
    <button type="submit" class="_button">Search</button> 
</form> 

私の理由は、全体として、フォームがその下の境界線を有することです。私は、テキストを別の色で「成長」させるために入力されたテキストを好みます。入力フィールドは、それ自身の境界線があるより小さい幅ですが、私はその幅に対してスムーズでダイナミックな体験をしています。

助けてもらえますか？ありがとう。我々はこれを行うことができます。この例では

Answer 1

：固定widthこれで絶対位置

• 入力が変化しない、とのデータ
• 入力からの値に基づいてwidthを変更します要素を取得します決してテキストを透明にすることで、入力テキストのみを表示します。
• 幅

$('input').on('keypress', function() { 
 
    $('span').text($(this).val()) 
 
})

.container { 
 
    text-align: center; 
 
    position: relative; 
 
    font-size:25px; 
 
} 
 
.container img, .container span { 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    margin-right: -4px; 
 
    vertical-align: middle; 
 
} 
 
.container span { 
 
    padding: 0 10px; 
 
    font-family: sans-serif; 
 
    color: transparent; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    max-width: 250px; 
 
} 
 
.container input { 
 
    width: 250px; 
 
    border: none; 
 
    text-align: center; 
 
    font-size:inherit; 
 
    padding: 0 50px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    z-index: 5; 
 
    background: transparent; 
 
    transform: translate(-50%, -50%) 
 
} 
 
input:focus { 
 
    outline: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <img src="http://placekitten.com/50" alt=""> 
 
    <span>Type here</span> 
 
    <input type="text" placeholder="Type here"> 
 
    <img src="http://placekitten.com/50" alt=""> 
 
</div>

---

_{注意の増加のilusion作成要素中心：静止テキストを削除する際にいくつかの問題を持っていますが、あなたのアイデア}

を取得します