Question

所以我正在创建一个简单的进度样式栏，显示每个字段输入了多少。进度条中的颜色表示已在输入或输入组合中输入的不同金额。有没有办法将模糊行为绑定到css width属性，并在每次用户输入一些数字并离开字段时调整它。我想将它限制在某个值，所以显示颜色的每个10％的条形代表100美元左右。有什么想法吗？

<label for="downPayment" class="form-control-label dpl">Down Payment</label>
<input type="number" class="form-control" id="downPayment" placeholder="$0" onkeypress="return    isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="manufacturerRebate" class="form-control-label mrl">Manufacturer Rebate</label>
<input type="number" class="form-control" id="manufacturerRebate" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>
<label for="tradeInValue" class="form-control-label tivl">Trade-In Value</label>
<input type="number" class="form-control" id="tradeInValue" placeholder="$0" onkeypress="return isNumberKey(event)" onBlur="addCommas(this)"/>

<br>
<div class="progress">
<div class="progress-bar" style="width: 90%;">
<div class="progress-bar progress-bar-success" style="width: 80%;">
<div class="progress-bar progress-bar-secondary" style="width: 20%;"></div>
</div>
 </div>

CSS：

.progress {
 height: 1.5625em;
 margin-bottom: 0.5em;
 overflow: hidden;
 background-color: #e5e5e5;
 border-radius: 0.0725em;
 text-align: center;
}

/*  The actual progress bar itself */
.progress-bar {
float: left;
width: 0;
height: 100%;
 color: white;
background-color: #0088cc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

.progress-bar-secondary {
background-color: gray;
}

.progress-bar-success {
background-color: #377f31;
}

.progress-bar-danger {
 background-color: #880e14;
}

  .progress-bar-warning {
   background-color: #dba909;
  }

jQuery的：

// When the <input>'s value changes

$（“＃downPayment”）。change（function（）{

// If the value is less than 7, add a red border
if ($(this).val() < 28435) {
$(".progress-bar-secondary").css("width","10%");
}

// Else if the value is equal to 7, add a green border
else if ($(this).val() == 28435) {
$(".progress-bar-secondary").css("width","20%");
}

// Else if the value is greater than 7, add an orange border
else if ($(this).val() > 28435) {
$(".progress-bar-secondary").css("width","40%");
}

// Else if the value is anything else, add a black border
else {
$(".progress-bar-secondary").css("width","20%");
}

});

Fiddle

Answer 1

你可以使用：

$('#INPUT_ID').blur(function(){
    //do something here....
    // you can update the css via jquery like using the jquery .css()
    // $('.progress').css('width','20%');
});

您可以将此作为参考http://api.jquery.com/blur/ AND http://api.jquery.com/css/

使用JQuery更新CSS：width onblur

1 个答案: