HTML textarea是否支持文本循环显示？如何实现单行固定高度文本框的自动循环横向滚动效果

Absolutely! You can build this fixed-height, scrolling input component using just HTML, CSS, and JavaScript—no external libraries required. While a native <textarea> can work for basic input, its built-in scrolling behavior makes seamless looping tricky. Instead, a <div> with contenteditable gives us more control to implement that smooth, news-ticker style scroll. Let’s break down how to do it:

Core Concept #

We’ll use two key elements:

• A hidden contenteditable div to handle user input (so typing doesn’t interfere with the scrolling animation)
• A visible container with two copies of the input text. When the text overflows the container, we’ll animate these copies to slide horizontally, creating a seamless loop. The animation triggers only after the user stops typing.

Full Implementation #

HTML #

<div class="input-container">
  <!-- Hidden editable area for input -->
  <div class="hidden-input" contenteditable="true" placeholder="Type something..."></div>
  <!-- Visible container for scrolling text -->
  <div class="text-scroller">
    <span class="scroll-text"></span>
    <span class="scroll-text"></span>
  </div>
</div>

CSS #

.input-container {
  position: relative;
  width: 300px; /* Adjust to your desired width */
  height: 24px; /* Exact single-line height */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 24px; /* Match container height for vertical centering */
}

.hidden-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  background: transparent;
  border: none;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  color: transparent; /* Hide input text since we show it in the scroller */
  caret-color: #333; /* Keep cursor visible */
}

.text-scroller {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 8px;
  white-space: nowrap;
}

.scroll-text {
  display: inline-block;
}

/* Animation for scrolling loop */
@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.scroll-active .scroll-text {
  animation: scrollLoop 10s linear infinite; /* Adjust duration for speed */
}

JavaScript #

const hiddenInput = document.querySelector('.hidden-input');
const scrollTextElements = document.querySelectorAll('.scroll-text');
const textScroller = document.querySelector('.text-scroller');
const inputContainer = document.querySelector('.input-container');
let typingTimer;
const typingDelay = 500; // Wait 500ms after last keystroke to trigger scroll

// Sync input text to both scroll elements
hiddenInput.addEventListener('input', () => {
  const inputText = hiddenInput.textContent;
  scrollTextElements.forEach(el => el.textContent = inputText);
  
  // Reset timer on each input
  clearTimeout(typingTimer);
  typingTimer = setTimeout(checkScrollNeeded, typingDelay);
});

// Check if text overflows container and toggle animation
function checkScrollNeeded() {
  const textWidth = scrollTextElements[0].offsetWidth;
  const containerWidth = inputContainer.offsetWidth;
  
  if (textWidth > containerWidth) {
    textScroller.classList.add('scroll-active');
  } else {
    textScroller.classList.remove('scroll-active');
  }
}

// Handle placeholder for contenteditable
hiddenInput.addEventListener('blur', () => {
  if (!hiddenInput.textContent) {
    hiddenInput.textContent = 'Type something...';
  }
});

hiddenInput.addEventListener('focus', () => {
  if (hiddenInput.textContent === 'Type something...') {
    hiddenInput.textContent = '';
  }
});

Key Details Explained #

1. Seamless Scrolling: By using two identical text elements, the animation slides them left by 100% of their width. When the first element scrolls out of view, the second takes its place—creating a smooth, infinite loop with no jump.
2. Typing Delay: The setTimeout ensures the animation only starts after the user stops typing, so scrolling doesn’t interrupt input.
3. Contenteditable vs Textarea: Using contenteditable lets us separate the input area from the display area, avoiding conflicts with textarea’s native scrolling behavior. It also makes it easier to style the display text independently.

Can You Use a Native Textarea? #

Technically yes, but it’s less smooth for looping. You’d need to manually adjust scrollLeft and reset it to 0 when it reaches the text width, which causes a noticeable jump. The contenteditable approach above is far more polished for the seamless loop effect.

内容的提问来源于stack exchange，提问作者manifoldnik