到目前为止,请参阅我的代码(jsfiddle)。
一旦达到最大容量,我将尝试更改进度栏的颜色。
我该怎么做?
HTML代码:
<textarea></textarea>
<span id="characters">255 left</span>
<br>
<progress id="myProgress" value="0" max="255">
</progress>
JS代码:
$('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) {
event.preventDefault();
// make the color of progress bar red here!!
}
}
progress::-webkit-progress-value
在css中添加它会更改颜色并同时定义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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句