Question

今天我试图在每次用户填写文本框时填写一个进度条，如下所示：假设我没有填充，我在屏幕上有10个文本框我希望进度条为0％但是如果用户填写其中5个，我希望它是50％。我找到了如何制作进度条，但无法弄清楚如何使这个条件与TextBoxFor一起使用

如果有人可以提供帮助

Answer 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;

});

您可以通过“focusout”替换keyup事件，以减少验证次数，但只检查用户何时单击输入字段。

Answer 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的每个输入文本，并在输入文本更改时随时调用。

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

Answer 3

** **根据时间设定的进度栏填充** **

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

<body onload="move()">



<div id="myProgress" class="meter">
  <span id="myBar">
    <center><div id="label">1%</div></center>
  </span>
</div>

<br>




</body>

＆＃13;

如何填写每次填充文本框时填充的进度条

3 个答案: