html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>实时计算字符串长度</title>
<link rel="stylesheet" href="样式.css" />
<script src="脚本.js" async></script>
</head>
<body>
<div class="容器">
<div class="左"></div>
<div class="中">
<textarea class="文本域" id="文本域" placeholder="请输入你要处理的文字">
</textarea>
<span class="显示" id="显示"></span>
</div>
<div class="右"></div>
</div>
</body>
</html>
css
* {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
}
body{
background-color: coral;
}
.容器 {
margin: 20px;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /*设置行与列之间的间隙*/
}
.左 {
width: 10%;
height: 100%;
flex: 1 1 auto;
}
.中 {
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
flex: 1 1 60%;
align-items: flex-start
}
.文本域 {
width: 100%;
height: 300px;
}
.右 {
width: 10%;
height: 100%;
flex: 1 1 auto;
}
/* 超小型设备(电话,600px 及以下) */
@media only screen and (max-width: 600px) {
.文本域 {
width: 90%;
height: 300px;
}
.中 {
width: 100%;
flex: 1 1 100%;
}
}
js
var 文本域 = document.getElementById("文本域");
文本域.innerHTML = "";
文本域.style.resize = "none";
文本域.style.fontSize = "18px";
var 显示 = document.getElementById("显示");
显示.innerHTML = "";
文本域.addEventListener("input", function () {
// 获取文本域的值
var text = 文本域.value;
// 计算并显示字数
显示.innerHTML = "总长度:" + text.length;
});
发表回复