让input有更好的体验

最近做了一个类似这样的功能，在移动端上，数字可增可减。其中，能改变数字的触发点有：

• "-"号
• "+"号
• 点击数字区块，唤起数字键盘。

这里，我直接用input来实现这个数字区块。

1. type="number"还是"tel"?

对比一下两张图，就能很快知道结论。

• type="number"下（左侧为ios，右侧为Android）：

• type="tel"下（左侧为ios，右侧为Android）:

显然，如果我是用户，我会更倾向于第二种，冒号、分号、感叹号等等对于这样的场景一点作用都没有。于是我使用：

<input type="tel">

2. 修改input值的交互

因为在移动端，手指触碰屏幕没有办法做到很精确，所以常会出现这样的问题：

• 本来希望能点到最后，像这样：

• 却成了这样：

我想到了有几种体验更好的方案：

1. 点击后，光标自动跑到最后。
2. 点击后，全选内容。这次我认为最佳的体验。
3. 可以左移、右移。因为这个功能位置太小，和我的删除交互冲突了。我把这种方案排除。
4. 监听inputfocus以后内容置空，监听blur如果改变就复原。这种方案可以做，但不是最好的。

于是，我从方案4到方案1，最终到方案2。（方案2的实现，请往后看）

有时候，交互真的就这么重要，也会让我们改了又改，改了又改……

2.1. 实现input光标到指定位置

只需要一个函数：

/** 
 *  设置光标位置函数
 *  ctrl：input
 *  pos：光标的位置
 **/
function setInputPosition(ctrl, pos) { 
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    } else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

调用一下：

 setInputPosition(input, input.value.length);

2.2. 全选input里的内容

这种方法很简单，就是突然失忆了。

document.querySelector('.cycle-input').select();

如果ios下失效，可以使用:

var input = document.querySelector('.cycle-input');
input.select();
input.setSelectionRange(0,9999);

3. 其它

一般这种信息多需要过滤。过滤后，如果用户输入错误信息：

• 反馈信息。弹个toast反馈信息，这个一般不会忘，除非懒。
• 值。值重置或是取上限/下限值，根据情景而定。

最后，我想说：

1. 作为一名前端，不要忽视用户体验，一个产品的成败就在我们手中。
2. input的体验进化之路永不停息。快4月份了，小麻雀成长为老麻雀之路也永不停息。