html文本区域支持文本的循环显示吗

Question

我想要得到的是一个固定大小(高度正好为一行(的文本字段，您可以在其中键入一些文本。如果文本足够短，可以放在文本字段中，则应该只显示它。但是，如果文本太长，它应该以一个循环显示，例如，它不断地在字段中移动并重新开始。就像你在新闻电视上看到的那样，一个无限循环字符串的连续横向滚动。这应该在用户停止键入后立即发生。

我的问题：只需使用html textarea/css/js就可以实现这一点吗？也许有一种方法可以在键入的文本中平滑地横向滚动，然后看起来毫无疑问地跳回到开头？我可以创建一个html文本区域，其中包含我需要的所有属性(如隐藏滚动条、固定大小、仅水平滚动(，但我不知道如何以上述方式移动文本。

我并不局限于在html的textarea中使用bulit，所以如果你有任何其他可以在html/css/js中完成的实现想法，欢迎你。

谢谢！

Answer 1

不，没有本地的东西。这是一个棘手的解决方案。首先检测溢出，但可以破解它。为了简单起见，我假设字符串的长度。然后当它"；溢出"；我要转动绳子。再次按下按键时重置很重要。

总而言之，也许更稳健的解决方案是在blur上旋转，在focus上停止。

var input = document.querySelector("input");
var int_id;
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
function is_overflow(input) {
// for now:
return input.value.length >= 14
}

input.addEventListener('keydown', function() {
stop(input)
})
function stop(input) {
if (int_id) {
clearInterval(int_id)
input.value = input.getAttribute("data-value") || input.value
int_id = null;
}
}
input.addEventListener('input', debounce(function(ev) {
if (is_overflow(input)) {
input.setAttribute("data-value", input.value);
int_id = setInterval(function() {
rotate(input)
}, 100);
} else {
stop(input)
}
}))
function rotate(input) {
var str = input.value
var num = 1;
input.value = str.substr(num) + str.substr(0, num);

}

<input style="width:100px">