html使用flex布局实现的实时计算字符串长度功能

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;
  });

 

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注