javascript - 在文本输入中滑动文本

Question

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

Answer 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 hackery 并在if.

Answer 2

这是可能的，但它涉及很多工作。

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

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

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

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

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