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

How to make a progress bar that fills every time a textbox is filled

本文关键字：填充 何制作 文本      更新时间：2023-09-26

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

如果有人能帮助

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

<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，则可以使用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的表单中的每个输入文本，并且在输入文本更改时调用它。

请注意，您可能需要在这方面做一些额外的事情来区分输入是否正确验证（即，如果值不正确，则不计算进度条中的一些输入，例如无效的电子邮件或数字电话输入中的字母字符）

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

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>

相关文章：