对原生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>

运行效果:

相关推荐
abigale0312 分钟前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者32 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile36 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399738 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊44 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火44 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月5 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
脑袋大大的6 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络7 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码