abstrait：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>12.textarea文本域字數(shù)限制(2)</title> <style type="text/css"> .box{ width: 600px; h
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>12.textarea文本域字數(shù)限制(2)</title>
<style type="text/css">
.box{
width: 600px;
height: 160px;
border: 10px solid pink;
border-radius: 10px;
margin: 0 auto;
padding: 10px;
}
.box1{
float: right;
width: 150px;
height: 24px;
text-align: center;
font-size: 14px;
color: #888;
}
.box1 span{
font-size: 16px;
font-weight: bold;
}
#text{
width: 600px;
height: 100px;
border: 1px solid #888;
margin-top: 5px;
}
#btn{
float: right;
border: 0;
border-radius: 4px;
width: 60px;
height: 28px;
line-height: 28px;
background: lightblue;
}
#btn:hover{
background: pink;
outline: none;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">還可以輸入<span id="number"></span>字</div>
<textarea id="text" placeholder="請輸入您的評論..."></textarea>
<button type="button" id="btn">發(fā)布</button>
</div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var text = document.getElementById('text'); // 獲取textarea元素
var number = document.getElementById('number'); // 獲取span元素
var btn = document.getElementById('btn'); //獲取button元素
var m ; //定義一個空變量
// 當文本域鍵入字體的時候執(zhí)行函數(shù)
text.onkeyup = function kp(){
m = 80 - text.value.length; // 獲取到文本域的字符長度減去規(guī)定80的長度
if(m<0){
number.style.color = 'red'; //文本域的字符串數(shù)量小于0的時候顯示為紅色
}else{
number.style.color = '#888'; // 否則灰色
}
number.innerHTML = m; //把剩余數(shù)量顯示出來
}
//點擊發(fā)布按鈕時執(zhí)行的函數(shù)
btn.onclick = function(){
//判斷是否有內(nèi)容寫入與是否超出限制的長度
if(m==80){
alert('請?zhí)顚懺u論');
text.focus();
}else if(m<0){
alert('超出限制');
text.focus();
}else{
alert('發(fā)布成功');
}
}
}
</script>
Professeur correcteur：天蓬老師Temps de correction：2019-01-27 18:14:44
Résumé du professeur：border: 0; 以為不要這樣寫了, 應該寫完整: border-width, border應該專用于簡寫