Question

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

Answer 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个字符进行清理，添加一些功能，允许用户重置输入并重新输入其他内容。

在文本输入中滑动文本

2 个答案: