留言板的字体次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 style="text-align: center">留言板</h1>
<hr />
<p id="count">还能输入140字</p>
<form action="" id="form">
<textarea
id="content"
name="message"
style="width: 100%"
cols="30"
rows="10"
placeholder="留言内容"
></textarea>
<input type="submit" value="提交" />
</form>
<br /><br /><br />
<script>
// 判断输入内容是否为空,如果为空不能发生请求
let textArea = document.getElementById("content");
textArea.value = "";
// 阻止默认事件
let formObj = document.getElementById("form");
formObj.onsubmit = function (e) {
if (!textArea.value) {
alert("请输入内容,再发请求");
e.preventDefault();
}
};
let countObj = document.getElementById("count");
textArea.oninput = function (e) {
let count = 140 - textArea.value.length;
countObj.textContent = "还能输入" + count + "个字";
if (count < 0) {
//字数达到上限了
textArea.value = textArea.value.substr(0, 140);
countObj.textContent = "字数已达上限，不能继续输入了";
}
};
</script>
</body>
</html>
浙公网安备 33010602011771号