对原生textarea加上:当前输入字数/最大输入字数

源码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea Character Counter with Draggable Resizing</title>
<style>
  .container {
    position: relative;
    width: 100%;
    max-width: 280px; /* Adjust as needed */
  }
  #inputText {
    width: 100%;
    min-width: 280px; /* Minimum width to prevent shrinking */
    height: 100px; /* Adjust initial height as needed */
    min-height: 100px; /* Minimum height to prevent shrinking */
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px; /* Adjust font size as needed */
    overflow: auto; /* Handle text overflow */
  }
  .counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: black;
    font-size: 12px; /* Adjust font size as needed */
  }
  .counter.max {
    color: red;
  }
</style>
</head>
<body>
<div class="container">
  <textarea id="inputText" rows="6" maxlength="150"></textarea>
  <div id="charCount" class="counter">0/150</div>
</div>

<script>
  const textArea = document.getElementById('inputText');
  const charCount = document.getElementById('charCount');
  const minWidth = 280; // Minimum width for the textarea

  textArea.addEventListener('input', function() {
    const textLength = textArea.value.length;
    charCount.textContent = `${textLength}/150`;

    if (textLength >= 150) {
      charCount.classList.add('max');
    } else {
      charCount.classList.remove('max');
    }
  });

  // Function to handle mousemove event for resizing
  function handleResize(event) {
    const mouseX = event.clientX;
    const textareaRect = textArea.getBoundingClientRect();
    const containerRect = textArea.parentNode.getBoundingClientRect();

    let newWidth = mouseX - textareaRect.left;

    // Ensure new width respects minimum width
    if (newWidth < minWidth) {
      newWidth = minWidth;
    }

    // Set new width to textarea
    textArea.style.width = newWidth + 'px';

    // Adjust counter position based on textarea width change
    charCount.style.right = `${containerRect.right - textareaRect.right + 10}px`;
  }

  // Listen for mousedown event on textarea for starting resize
  textArea.addEventListener('mousedown', function(event) {
    if (event.offsetX > textArea.offsetWidth - 10) {
      // Only start resize if mouse is near the right edge
      document.addEventListener('mousemove', handleResize);
    }
  });

  // Stop resizing on mouseup event
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', handleResize);
  });

  // Initial check on load
  window.addEventListener('load', function() {
    const currentWidth = textArea.clientWidth;
    if (currentWidth < minWidth) {
      textArea.style.width = minWidth + 'px';
    }
  });
</script>
</body>
</html>

运行效果:

相关推荐
小文刀6965 分钟前
CSS-响应式布局
前端
三小河10 分钟前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法14 分钟前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku15 分钟前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀69618 分钟前
2025-35st-w-日常开发总结
前端
我是日安20 分钟前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
小lan猫25 分钟前
React学习笔记(一)
前端·react.js
晨米酱25 分钟前
JavaScript 中"对象即函数"设计模式
前端·设计模式
拜无忧25 分钟前
【教程】Nuxt v4 入门指南与实践 (vue前端角度开发)
前端·nuxt.js
云枫晖28 分钟前
手写Promise-什么是Promise
前端·javascript