如何像悬停字幕一样滚动输入框文本？

Question

我想实现这种功能。

1. 一个输入框

2. <input type="text" value="this is sample text larger then input box"
   style="width: 100px;" />

3. 它看起来像：

   

4. 文本未完全显示。所以我希望当鼠标悬停在此输入框上时，文本应像输入框内的跑马灯标签一样自动缓慢滚动。

5. 我正在用角度实现，因此，如果有任何与角度相关的解决方案（hack），例如replace元素，也请提及。

6. 如果有任何可用的解决方案（如果使用js或jquery或css，则请帮助我。

Answer 1

此链接将帮助您找到答案，它也可在文本框中使用根据需要定制

Marquee Example

$(document).ready(function() {
  var interval_val = 2;
  var timeout_ = null;
  $(".scroll_contant").on("mouseover", function() {
    var this_ = this;
    timeout_ = setInterval(function() {
      $(this_).scrollLeft(interval_val);
      interval_val++;
    }, 100);
  });

  $(".scroll_contant").on("mouseout", function() {

    clearInterval(timeout_);
    $(this).scrollLeft(0);
  });

})

.scroll_contant {
  overflow: hidden;
  width: 200px;
  background: red;
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="scroll_contant" type="text" value="Display the current time (the setInterval() method will execute the function once every 1 second, just like a digital watch). Use clearInterval() to stop time:" />