V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
scarlex
V2EX  ›  问与答

一个前端问题:@人功能

  •  
  •   scarlex · 2013-08-23 21:54:59 +08:00 · 3302 次点击
    这是一个创建于 4137 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我觉得@人功能最核心的地方就是获取光标位置,所以我现在的做法是watch光标位置,然后判断光标左边的字符是不是'@',如果是的话就根据光标位置把textarea里面的字符分成两部分,再获取用户输入的字符,筛选数据。最后把'@'前面的内容,筛选的用户,'@'后面的内容这三部分拼接起来。

    我按照这样的思路把功能做出来了,但在写单元测试(jasmine)的时候遇到了个问题。
    textarea.focus().val('12345');
    console.log(textarea[0].selectionStart)
    我用这样的语句,也找过其他设置光标位置的方法,但光标位置总是返回0,这样写不了测试。。

    是不是我这种方法不好写测试?
    有木有其他思路?

    顺便说下,获取光标位置我是用了caret.js。
    7 条回复    1970-01-01 08:00:00 +08:00
    ksc010
        1
    ksc010  
       2013-08-23 22:00:14 +08:00 via Android
    或者直接监听按键事件
    chloerei
        2
    chloerei  
       2013-08-23 22:31:36 +08:00
    用 contenteditable 做编辑区会不会好做点,Twitter 是这样的。
    Perry
        3
    Perry  
       2013-08-23 22:45:41 +08:00
    获取光标位置,可以参考:
    Caret.js: https://github.com/ichord/Caret.js
    At.js: https://github.com/ichord/At.js
    scarlex
        4
    scarlex  
    OP
       2013-08-23 22:59:59 +08:00
    @ksc010 直接监听按键事件?@人列表出现的位置是根据光标的吧?其实最后还是要获取光标位置吧?

    @chloerei 有木有具体点的做法!?

    @Perry Caret.js被我改写来用了,At.js有些地方没看懂@_@
    kfll
        5
    kfll  
       2013-08-23 23:12:37 +08:00 via iPhone   ❤️ 1
    chloerei
        6
    chloerei  
       2013-08-24 00:20:46 +08:00   ❤️ 1
    有个现成的满足需要不? https://github.com/ichord/At.js
    scarlex
        7
    scarlex  
    OP
       2013-08-24 00:31:13 +08:00
    @chloerei 不能,我们项目很快要把jquery的依赖去除,这个只能当做参考。
    At.js的核心部件caret.js被我改写成angular的module来用。我目前获取光标就是通过他的方法来实现的。
    我目前的做法最大的问题是写测试比较困难。。

    @kfll 我去看看你这个 : -D
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2812 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 03:02 · PVG 11:02 · LAX 19:02 · JFK 22:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.