懸停時暫時設置輸入類型文字的動畫

Question

如果文本比當前輸入寬度寬，我想顯示輸入類型文本的內容。

當我將鼠標懸停在該字段上時，我希望文字滾動到左側或類似的位置，以便查看隱藏文字。

謝謝。

請注意：請告訴我是否必須添加/更改問題的標籤。

Answer 1

我想過我會如何做到這一點，這就是我想出的。

在輸入懸停我要採取輸入值，並把它放在一個div（或任何其他元素）。然後獲取該div的寬度並將其與輸入的寬度進行比較。如果div比輸入寬，那麼我將根據寬度的差異爲輸入文本縮進設置動畫效果。

$('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/

如果你用Google搜索了一下的「輸入文本向左滾動」，你會發現像this答案，它使用jQuery文檔上hover組合和animate你會拼湊的解決方案自己。