Как прокрутить текст в поле ввода, например, при наведении курсора? - PullRequest
Новая
       48

Как прокрутить текст в поле ввода, например, при наведении курсора?

0 голосов
/ 02 октября 2019

Я хочу реализовать такую ​​функциональность.

  1. одно поле ввода
  2. <input type="text" value="this is sample text larger then input box" style="width: 100px;" />

  3. Это будет выглядеть так:

    enter image description here

  4. Текст отображается не полностью. поэтому я хочу, чтобы при наведении курсора мыши на это поле ввода текст автоматически медленно прокручивался, как маркер внутри поля ввода

  5. Я использую в угловом формате, поэтому, если какое-либо решение (хак) связанок угловому, как заменить элемент, пожалуйста, также укажите.

  6. Если какое-либо решение доступно (если оно использует js или jquery или css), тогда, пожалуйста, помогите мне.

1 Ответ

2 голосов
/ 02 октября 2019

Эта ссылка поможет вам найти ответ, она также работает в текстовых полях и настраивается в соответствии с вашими потребностями.

Пример выделения 

$(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:" />
...