让input有更好的体验

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

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

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

input


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

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

  • type="number"下(左侧为ios,右侧为Android):

图1

  • type="tel"下(左侧为ios,右侧为Android):

图2

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

<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月份了,小麻雀成长为老麻雀之路也永不停息

麻凯倩

微信:makaiqian