如何制作每次填充文本框时都会填充的进度条答案

【问题标题】：How to make a progress bar that fills every time a textbox is filled如何制作每次填充文本框时都会填充的进度条
【发布时间】：2016-05-10 14:37:03
【问题描述】：

今天我试图放置一个进度条，每次用户填充文本框时都会填充，如下所示：假设我在屏幕上有 10 个文本框，如果没有填充我希望进度条为 0%，但是如果用户填写其中的 5 个，我希望它是 50%。我找到了如何制作进度条，但不知道如何让这个条件与 TextBoxFor 一起工作

如果有人可以帮忙

【问题讨论】：

标签： javascript jquery asp.net-mvc twitter-bootstrap razor

【解决方案1】：

假设你的文本框（输入类型=文本？）。

<input type="text" class="check-fill">

您可以在每个输入字段上添加 jQuery keyup 事件，以检查已完成的输入字段的数量。

$(function(){ //When document is ready
    $(".check-fill").keyup(function(){ //Prefer keyup so you check after, in case the user delete his entry.
        var $fields = $(".check-fill");
        var count = 0;
        $fields.each(function(){
             if($(this).val().length > 0)
                  count++;
        });
    });

    var percentage = Math.floor(count * 100 / $fields.length);
    //Here you have your percentage;

});

您可以将keyup事件替换为“focusout”事件，以减少验证次数，但它只会在用户点击输入字段时进行检查。

【讨论】：

看起来不错，但之后这与我的进度条有什么关系？
我怎么能对我的酒吧说你的百分比等于 jquery 的百分比？
你的进度条是怎么做的？使用标签或使用带有 css 的 div 元素使其看起来像一个进度条？
使用进度条引导
如果你的进度条宽度设置为 % 你可以使用 $(".progress-bar").css("width", percent + "%");如果你的进度条 html 代码看起来像这样here

【解决方案2】：

如果您使用的是 JQuery，则可以使用 Progressbar。然后您可以将某个类应用于所有输入或应用于所有输入的选择器，最后附加一个事件以在它们不为空时捕获。

示例：

表格可以是这样的：

<form class="progessform" ...>
    <input type="text" ..../>
    <input type="text" ..../>
</form>

您可以通过在 jquery 脚本中使用 .progressform input[type=text] 来选择这些：

$('.progressform input[type=text]').on('change', function (e) {

   var total = count all .progressform input[type=text] within the same form

   var filled = count all .progressform input[type=text] values that are not empty

   modify your progressbar according to the count: filled * 100 / total
}

这个事件被附加到表单中的每个输入文本，类progressform，只要输入文本发生变化，它就会被调用。

请注意，您可能需要对此进行额外处理以区分输入是否正确验证（即，如果值不正确，则不计算进度栏中的某些输入，例如无效的电子邮件或字母字符数字电话输入）

【讨论】：

【解决方案3】：

** **根据以秒为单位设置的时间填充进度条** **

function move() {
  var elem = document.getElementById("myBar");
  var width = 1;
  var id = setInterval(frame, 100); // set time ex: 100 as 10s & 1000 as 1min
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
return false;
}

<style>
<body>
#label {
  text-align: center;
  line-height: 22px;
  color: white;
}
.meter {
    height: 20px;
    position: relative;
    margin: 60px 0 20px 0;
    background: #555;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    -moz-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
    display: block;
    width:1%;
    height: 100%;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: rgb(43,194,83);
    background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
    background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
    -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}
.meter > span:after, .animate > span > span {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) );
    background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent );
    z-index: 1;
    -webkit-background-size: 50px 50px;
    -moz-background-size: 50px 50px;
    background-size: 50px 50px;
    -webkit-animation: move 1s linear infinite;
    -moz-animation: move 2s linear infinite;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}
</style>

<body onload="move()">



<div id="myProgress" class="meter">
  <span id="myBar">
    <center><div id="label">1%</div></center>
  </span>
</div>

<br>




</body>

【讨论】：

这是一个不错的进度条，但它没有回答最初的问题 - 如何根据其中包含文本的文本框的数量来填充它。此外，如果提供代码，它有助于评论或讨论你在做什么。
你的意思是我无法理解，也许是我的语言问题或不知道。
您能否详细说明您的问题
你的意思是说，当有人在栏中输入文本/数字时，它会被填满还是别的什么？
这不是我的问题，但我认为是这样的：假设您有三个文本框。虽然它们都是空的，但进度条是 0%。当有文本时，进度条为 33%。两个填充，它是 66%。已满，已 100%。