让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月份了,小麻雀成长为老麻雀之路也永不停息
时间: 2016-04-08

让input有更好的体验的相关文章

Firefox插件:网页实现更安全浏览体验的插件

文章简介:10个能够实现更安全浏览体验的Firefox插件. 目前,Firefox的插件数量庞大,种类繁多,笔者就为大家总结了10款能够实现更安全浏览体验的Firefox插件,便于大家挑选应用. 1. HTTPS Everywhere HTTPS Everywhere受到了Google推出加密版搜索的启发,它的目的是让用户在访问多数网站时能一直保持加密通信状态.绝大多数网站对HTTPS加密的支持相当有限,或者默认不使用加密,或者加密网页中嵌入大量非加密链接.HTTPS Everywhere扩展就

寻求更好的体验:登陆时不用输入用户名和密码

网页制作Webjx文章简介:如何实现不需要密码登录的网站? 好像现在我们上网的第一件事就是输入用户名和密码.在用户名逐渐统一到电邮后,稍微方便了点.然而,还是很有些老顽固的网站,比如百度,不支持用电邮登录:这样直接导致我们的用户名不能重复,难听,且以后不能更改. 注册一个网站总是有很多原因,而根源只有一个:建立可持续跟踪的联系.比如发布内容,加好友或者网上交易.除此之外,无论是阅读,还是作为过客留言,我们都更希望能不注册就不注册,一切求简.为了尽可能减少注册带给用户的麻烦,现在注册的门槛也"每况

网站微调的必要性:为用户提供更好的体验

网站的建设不能一步到位,这是众所周知的,即使前期做的相当的完美,在后面的过程也需要根据用户的需求去适当的修改它,如果一个网站做好后就不管它,那么可能刚开始关键词排名很不错,但是随着用户的需求发生了改变,搜索引擎调整了算法,而导致关键词排名下降. 改版和微调是有所区别的,改动url路径和大的结构修改那叫网站的改版,可能会对网站造成较大的影响,而细微的调整对于网站来说一般不会受到影响,甚至可能会出现更好的排名,下面来分析下如何微调网站,给用户带来更好的体验: 微调细节一.网站logo的调整 网站lo

鼠标飘怎么办 简单设置换更棒游戏体验

相信有不少网友在玩游戏时出现过"鼠标飘"的情况,就是游戏控制物体与鼠标操控间有明显的延迟,比如玩FPS游戏时,瞄准镜头总是慢一拍,这种时候就很想砸鼠标有木有?!因此就牵连出一个问题,鼠标飘怎么办?今天笔者就介绍几种方法,来利用最小的成本达到尽可能最好的效果. 鼠标飘怎么办 简单设置换更棒游戏体验 鼠标飘的原因 出现鼠标飘的情况时,我们一般都会把目光集中在与之关系最密切的部分上,那就是鼠标.的确,鼠标的问题很可能会造成这一现象,一种情况是鼠标的质量实在太差,DPI.CPI参数过低,以至于

调查显示49%的受访女性同意或非常同意自己更喜欢网购体验

摘要: 41%的亚洲女性在自己网购时会出于内疚为家人买点东西.昨天,由经济学人智库EIU受唯品会 委托独立调研完成的<崛起中的亚洲女性网购力量>报告中揭示了这一女性购物心理.报告还 41%的亚洲女性在自己网购时会出于"内疚"为家人买点东西.昨天,由经济学人智库EIU受唯品会 委托独立调研完成的<崛起中的亚洲女性网购力量>报告中揭示了这一女性购物心理.报告还称,比起实体店,七成中国大陆女性青睐网购. 报告内容显示,比起去线下实体商店购物,49%的受访女性同意或非常

用心聆听,只为提供更优用户体验

  随着云计算业务的快速发展,云业务量的蓬勃发展.如何应对全球百万级服务需求.如何保证用户体验?人工智能到底是否可以取代人类,提供更优使用体验?   就此问题业界一直争论不休.在12月20日科技界年度压轴大戏--2017云栖大会·北京峰会的"企业云上业务优化"专场,阿里云客户服务部总经理张颖杰先生分享了阿里云服务面对上述问题时的解决方案.   阿里云服务已经覆盖了客户全生命周期,即售前.售中.售后.在售前阶段,阿里云服务将提供专业的咨询.架构服务,为客户上云提供完整可靠的解决方案:在售

网站导航应该怎么设置更利于用户体验呢

摘要: 今天写的是关于导航设置的文章,因为我发现很多中小型的网站根本不明白导航设置的意义,基本都是一味的在导航中放置自己的产品从而展现给用户,这样的设置在大部分情况下是不 今天写的是关于导航设置的文章,因为我发现很多中小型的网站根本不明白导航设置的意义,基本都是一味的在导航中放置自己的产品从而展现给用户,这样的设置在大部分情况下是不符合逻辑的,那么我们应该怎么设置更利于用户体验呢?下面我们一起讨论下. 1.网站设置导航的意义在哪里? 导航的设置是为了更方便的帮助用户在最短的时间找到他们需要的内容

浅谈情感化设计 如何为用户做出更好的体验

上个月在淘宝UED奶茶会分享的主题.把它整理成文字,分享给大家. 一. 何为情感 情感是人对外界事物作用于自身时的一种生理的反应.是由需要和期望决定的.当这种需求和期望得到满足时会产生愉快.喜爱的情感,反之,苦恼.厌恶. 二. 何为情感化设计 情感化的设计只是一种创意工具,表达和发挥设计师的思想和设计目的,随着时代的发展,这种创意工具将变得日益锐利. 在<情感化设计>一书中从知觉心理学的角度揭示了人的本性3个特征层次:"即本能的.行为的.反思的,提出了情感和情绪对于日常生活做决策的重

当客网:我们更注重用户体验

俗话说:"江山代有才人出,"而互联网更是容易展现才华的大舞台,除了网络上大家所熟悉的各大知名的人物,我们更同样关注一些对互联网有着美好梦想和正朝着自己理想奋斗的年轻朋友.近日站长资讯对一些年轻的站长朋友们做了一些采访.        HOOFEI在校的大二,动画专业学生,www.downkr.com站长,当客网,清新的下载网站.相信大家现在都不是很熟悉,不过没关系,在未来的日子里希望它给我们带来更好的用户体验,hoofei说网站现在还没有正式开张,3月21号将成为当客网的生日,321,