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

您可以使用jQuery收听文字change的{{1}}，keyup和paste事件。

然后，根据您所需的输入长度计算一个百分比;并使用此百分比设置进度条的input。

如果“百分比”高于100 - 只需将其重置为100即可。 jQuery代码如下：

width

请在此处查看正在使用的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

如何根据输入的字母数填写进度条？

2 个答案: