Временно анимировать текст типа ввода при зависании

Question

Я хочу показать содержимое текста типа ввода, если текст шире, чем текущая ширина ввода.

Когда я нахожу поле, я хочу, чтобы текст прокручивался влево или что-то подобное, чтобы просмотреть скрытый текст.

спасибо.

Примечание: сообщите мне, если мне нужно добавить/изменить теги вопроса, пожалуйста.

Answer 1

Я думал о том, как я это сделаю, и это то, что я придумал.

При вводе ввода я собираюсь ввести входное значение и поместить его в div (или любой другой элемент). Затем получите ширину этого div и сравните его с шириной ввода. Если div шире ввода, тогда я собираюсь оживить входы text-indent разностью ширины.

$('input').hover(function(){ 
    var temp = $('div').html($(this).val()).width(); 
    if($(this).width() < temp){ 
     $(this).animate({ 
      textIndent: $(this).width()-temp 
     }, 100); 
    } 
}); 

Вы можете увидеть полное решение здесь: http://jsfiddle.net/taneleero/tB5C5/2/

должно быть достаточно, чтобы ты.

Answer 2

Эх, хотя я и сделал этот комментарий. не мог устоять перед этим. Использование JQuery:

<input type="text" id="txt" value="A very long text goes here very long text goes here very long text goes here very long text goes here very long text goes here indeed."></input>

$('#txt').hover(

    function() { 
     $(this).animate({"scrollLeft": this.scrollWidth}, this.value.length*50) 
    }, 

    function() { 
     $(this).stop(); 
     this.scrollLeft = 0; 
    } 
) 

здесь JQuery .animate() используются для анимации .scrollLeft положения текста в поле ввода. Продолжительность анимации привязана к длине текста, поэтому скорость должна быть одинаковой для всех видов текстов. Когда мышь покидает входное управление - положение прокрутки сбрасывается до оригинала.

Демо: http://jsfiddle.net/uPGmC/

Если вы гугл немного для «ввода текста прокрутки влево», вы найдете ответы, как this, сочетая его с JQuery Документов на hover и animate вы кусочки решения вместе самостоятельно.