Question

到目前为止，请查看我的代码（jsfiddle）。

我尝试在达到最大容量时更改进度条的颜色。

我该如何做到这一点？

HTML code：

appsettings.json

JS代码：

<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

Answer 1

在css中添加progress::-webkit-progress-value，它会改变颜色并定义它为jquery。

      if(cs>=max) 
      $('#myProgress').css("background-color", "red");

或者您可以指定一个分配背景颜色的类，如

      if(cs>=max) 
      $('#myProgress').addClass("red");

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
	 var max = 255;
    var cs = $(this).val().length;
    if(cs>max) $(this).val($(this).val().toString().substring(0,max));
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
      if(cs>=max){
        $('#myProgress').addClass("red");
        }
      else{
        $('#myProgress').removeClass("red");

        }
    if (event.which < 0x20) {
        return;
      }
    if (cs >= max) {
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     
      
}

progress.red{
  background-color:red;
  color:red;
  }
progress.red[value] {color:red} /* IE10 */
progress.red::-webkit-progress-bar-value {background-color:red}
progress.red::-webkit-progress-value {background-color:red}
progress.red::-moz-progress-bar {background-color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>

<br>
<progress id="myProgress" value="0" max="255">
</progress>

Answer 2

编辑：所以为了确保这适用于大多数浏览器，您应该使用背景颜色而不是颜色。

因为你已经在使用JQuery了：

$('#myProgress').css("background-color", "red");

纯粹的JS：

document.getElementById('myProgress').style.backgroundColor = 'red';

Answer 3

添加

document.getElementById("myProgress").style.background = "#f3f3f3";

一旦达到最大值

这应该可以正常工作

$('textarea').keyup(updateCount);
$('textarea').keydown(updateCount);

function updateCount() {
     var max = 255;
    var cs = $(this).val().length;
    document.getElementById("characters").innerHTML= max-cs + " left..";
    document.getElementById("myProgress").value = cs;
    if (event.which < 0x20) {
        return;
      }
    if (cs == max) {
             document.getElementById("myProgress").style.background = "#f3f3f3";
        event.preventDefault();
        // make the color of progress bar red here!! 
      }     

}

Answer 4

检查此

的更新代码段

$(document).on('keyup keydown', 'textarea', updateCount);

function updateCount(event) {
    var max = 255;
    var cs = $(this).val().length;
    $("#characters").html(max - cs + " left..");
    $("#myProgress").val(cs);
    if (event.which < 0x20 && cs == max) {
        return;
    }
    if (cs == max) {
        event.preventDefault();
        $('#myProgress').addClass("red");
    } else {
        $('#myProgress').removeClass("red");
    }
}

progress.red {
    background-color: red;
    color: red;
}
progress.red[value] {
    color: red
}
progress.red::-webkit-progress-bar-value {
    background-color: red
}
progress.red::-webkit-progress-value {
    background-color: red
}
progress.red::-moz-progress-bar {
    background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<span id="characters">255 left</span>
<br>
<progress id="myProgress" value="0" max="255"></progress>

如何使用javascript更改进度条的颜色？

4 个答案: