入力された文字数に基づいてプログレスバーを埋める方法は？

Question

私はあなたが入力した十分な文字を持っているとき、あなたを伝えるためにプログレスバーの一種として機能します底にdiv要素を持っている入力ボックスを作成しようとしています。

私はこのプロジェクトをしようとすることを決めたとき、それは非常に簡単だろうと思っていても、仕事にこのアニメーションを取得することはできません。

私は私のコードと間違っているものを教えてください。ありがとう！

<div id='cntnr'> 
    <div id='inptDiv'> 
    <input id='inpt1'> 
    <div id='prgInd'></div> 
    </div> 
</div> 

---

var main = function() { 
    var inptAmnt = document.getElementById('inpt1').value; 
    if(inptAmnt.length === 1) { 
    $('#prgInd').css('width', 25); 
    } 
} 

$(document).ready(main); 

また、私は最初にこのコードを試してみましたが、それはどちらか動作しませんでした：

var main = function() { 
    var inptAmnt = document.getElementById('inpt1').value; 
    if(inptAmnt.length === 1) { 
    $('#prgInd').animate({ 
     width:25 
    },200) 
    } 
} 

$(document).ready(main); 

JSFiddle：https://jsfiddle.net/qcsb53ha/

Answer 1

あなたのテキストinputのchange、keyupとpasteイベントに耳を傾けるのjQueryを使用することができます。

その後、ご希望の入力の長さに基づいて割合を、うまく。この割合を使用してプログレスバーのwidthを設定します。 「割合」は100を超える場合

- もう一度100にリセット。 jQueryのコードは以下の通りです：

var desiredLength = 4; // no jokes please... 

// Listen to the change, keyup & paste events. 
$('#text-box').on('change keyup paste', function() { 
    // Figure out the length of the input value 
    var textLength = $('#text-box').val().length; 

    // Calculate the percentage 
    var percent = (textLength/desiredLength) * 100; 
    // Limit the percentage to 100. 
    if (percent > 100) { 
     percent = 100; 
    } 

    // Animate the width of the bar based on the percentage. 
    $('.progress-bar').animate({ 
     width: percent + '%' 
    }, 200) 
}); 

---

はここで働いJSFiddleを参照してください：https://jsfiddle.net/jqbka5j8/1/

を、私は通常の幅を設定するためのコード、および幅をアニメーション用のコードを含めました。必要なコメントを付けたりコメントを外したり、適切にテストしたりすることができます。

希望すると便利です。

Answer 2

必要はJavaScriptの使用はありません、純粋なCSSとContent Editableのみを使用できます：

HTML

<div> 
    <span contenteditable="true">sdfsd</span> 
</div> 

CSS

span 
{ 
    border: solid 1px black; 
} 
div 
{ 
    max-width: 200px; 
} 

JsFiddle example