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

news2024/11/19 20:24:17

源码:

<!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>

运行效果: