如何在悬停时滚动输入框文本，如选取框？

Question

我想实现这种功能。

1. 一个输入框
2. <input type="text" value="this is sample text larger then input box" style="width: 100px;" />

3. 它看起来像：

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

5. 我是在 Angular 中实现的，所以如果有任何与 Angular 相关的解决方案（hack）比如替换元素，那么也请提及。

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:" />