如何使进度条充满每次填充文本框

今天我试图把一个进度条填充每次用户填充文本框，就像这样：比方说，如果我有10个文本框在屏幕上，如果没有人填充我希望进度条在0％，但如果用户填写其中的5个，我希望它是50％。我发现如何使进度条，但找不出如何使这个状态与一个TextBoxFor如何使进度条充满每次填充文本框

工作，如果有人可以帮助

来源

2016-05-10 Christian Pliso

如果您正在使用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，它被称为任何时候在放文本被改变。

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

来源

2016-05-10 14:57:45 user1156544

让我们说你的文本框（输入类型=文本？）。

<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事件，以减少verifitcations的数字，但是当用户点击了输入字段只会检查。

来源

2016-05-10 14:58:39 Scotow

这看起来很好，但在那之后如何将关系到我的进度条？ –

我怎么能说我的酒吧你的百分比是相当于由jquery制定的percantage？ –

你如何做你的进度条？用标签或者用一种带有CSS的div元素使它看起来像一个进度条？ – Scotow

**进度条FILLUP根据时间设定SECOUNDS **

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>

来源

2016-11-23 14:47:05

这是一个不错的进度条，但它并没有回答最初的问题 - 如何根据文本框中的文本数量来填充它。此外，如果提供代码，它有助于评论或讨论你在做什么。 – amadan

你是什么意思，我不能理解，也许我的语言问题或不知道。 –

你能否请求充分说明你的问题 –

如何使进度条充满每次填充文本框

回答

相关问题