V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
flyn
V2EX  ›  前端开发

请教一个关于自动完成的问题

  •  
  •   flyn · 2023-11-16 07:29:43 +08:00 · 700 次点击
    这是一个创建于 392 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如图所示,在 Android 上使用 Google 搜索时先输入任意关键字触发联想列表,再输入拼音,此时点击任意联想关键词右侧的↖按钮即可将搜索框文本替换成对应的内容,同时候选的拼音也消失了,但是键盘依然是激活的

    测试了几个常见的搜索引擎,搜狗、Bing 和 DuckDuckGO 都可以做到,百度和 360 在替换文本后拼音还在。

    查了各种关于 Composition Events 相关的资料,但多数是关于防抖和节流的内容,也尝试了先 blur 再 focus 这种破坏体验的操作。搜了一圈自动完成库,似乎都是点击候选还残留拼音的。

    请教一下大佬们怎么才能实现这个平滑的效果呀?

    5 条回复    2023-11-21 06:09:37 +08:00
    chnwillliu
        1
    chnwillliu  
       2023-11-20 08:00:26 +08:00 via Android
    键盘仍然激活:pointerdown 里 event.preventDefault

    拼音候选消失:input.value 被赋值了
    chnwillliu
        2
    chnwillliu  
       2023-11-20 08:06:41 +08:00 via Android
    <input id="input"/>
    <button id="button" onpointerdown="event.preventDefault()" onclick="input.value += ' clicked'">click</button>
    flyn
        3
    flyn  
    OP
       2023-11-21 02:46:54 +08:00
    @chnwillliu 点击按钮 iOS Safari 键盘直接收起,Android 下拼音候选还在。不过谢谢了,我还是先 blur 再 focus ,起码在 Android 下还行
    chnwillliu
        4
    chnwillliu  
       2023-11-21 03:43:37 +08:00 via Android   ❤️ 1
    我没有 iOS ,安卓 Chrome Gboard 输入法下测试是可以的。

    Safari 不行可以把 onclick 换成 onpointerup,.记得也加上 preventDefault 。
    flyn
        5
    flyn  
    OP
       2023-11-21 06:09:37 +08:00 via iPhone
    果然和输入法有关系
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5557 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:15 · PVG 10:15 · LAX 18:15 · JFK 21:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.