在文本输入中滑动文本答案

【问题标题】：Sliding Text in Text Input在文本输入中滑动文本
【发布时间】：2013-02-04 13:00:58
【问题描述】：

在用户输入一定数量的字符后，有什么方法可以让一些文本向左滑动并在文本输入中消失。例如，当用户在输入第 16 个数字后输入他们的信用卡号时，数字会在输入字段中向左滑动，并且只有数字的最后 4 位可见

【问题讨论】：

举个例子就好了。我不完全确定我是否明白你在说什么。
让它看起来像它。在输入框上滑动一个框。
幻灯片是指隐藏还是动画？
幻灯片我的意思是动画幻灯片

标签： javascript jquery

【解决方案1】：

这里没有动画，但如果您需要，我当然可以帮助添加。

现场演示：http://jsfiddle.net/7TVxC/1/

在删除其他字符后，首先设置一个变量来保存输入。

var ccNum;

然后创建检查输入长度是否为 16 的函数，将输入保存到变量中。然后我们去掉前 12 个字符，只留下最后 4 个。

然后我们关闭输入，这样他们就不会认为这是一个错误。（您可能可以进行设置，以便他们仍然可以删除字符，然后将输入恢复正常，显示除他们删除的字符之外的所有字符。）

$('input').keyup(function(e){
    if($(this).val().length == 16){
        ccNum = $(this).val();
        $(this).val($(this).val().substr(12));
        $(this).prop('disabled', true);
    }
})

或者，您可以做一些 css 黑客操作并在 if 内添加一个负文本缩进，但这可能会因字符大小不同而变得棘手。

【讨论】：

【解决方案2】：

有可能，但需要做很多工作。

1。设置输入及其样式，如下所示：http://jsfiddle.net/FMmvV/

设置一个 jQuery 事件，当有人输入输入时触发该事件。然后，当输入有 16 个字符时做一些事情。

2。困难的部分是：要获得流畅、流畅的动画，您需要通过text-indent 属性为输入中的文本设置动画。由于它要求输入像素数，因此您还需要计算前 12 个字符的确切宽度，以便您可以将文本正确偏移正确的数量。

这个问题可能有一些关于如何在不知道字体系列或字体大小的情况下计算文本宽度的相关信息： https://stackoverflow.com/a/3395975/1718121

3。之后通过删除文本缩进和前 12 个字符进行清理，添加一些允许用户重置输入并重新输入其他内容的功能。

【讨论】：