How to scroll input-box text like marquee on hover?

Question

I want to implement this kind of functionality.

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

3. It will look like :

   

4. Text is not fully display. so I want that when mouse hover over this input box, text should automatically scroll slowly like marquee tag inside of input box

5. I am implementing in angular, so if any solution(hack) related to angular like replace element then please also mention.

6. If any solution available(weather it is using js or jquery or css) then Please Help Me.

Answer 1

This link will help you to find your answer it also work in text boxes customize according to you need

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