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之类的答案，并将其与hover和animate上的jQuery文档相结合，您可以将解决方案拼凑在一起自己。

悬停时暂时为输入类型文本设置动画

2 个答案: