在 ios safari 上设置 datalist 列表属性后，datalist 输入元素丢失光标答案

【问题标题】：datalist input element loses cursor after datalist list attribute is set on ios safari在 ios safari 上设置 datalist 列表属性后，datalist 输入元素丢失光标
【发布时间】：2020-06-14 10:16:29
【问题描述】：

我有一个 html datalist 元素，我试图仅在字段中输入两个以上字符时才显示自动完成列表。在桌面上，您可以输入从 0 到无穷大的字符，输入永远不会失去焦点，并且列表显示得很好。但是，对于移动设备（特别是 iOS safari），当输入的字符长度达到 3 时，尽管输入仍然具有焦点，但光标会消失。用户必须再次点击输入以继续他的搜索。我会提到，Safari 浏览器会向用户呈现一些不相关的自动完成结果，直到达到 3 的长度。这是管理我预期行为的数据列表上的侦听器：

  // Only show auto-complete results for greater than 2 characters.
  searchNameInput.addEventListener('keyup', e => {
    const input = e.target;
    const list = input.getAttribute('data-list');
    input.value.length > 2 ? input.setAttribute('list', list) : input.removeAttribute('list');

    // Unrelated code (i think):
    if (!input.value.length)
      filtersProxy.searchName = { name: '', city: '', stateProvince: '' };
  });

这是输入 3 个字符后浏览器的外观。请注意输入字段没有光标。 datalist 实际列表也尚未出现。

我尝试在每次 keyup 事件后使用 setTimeout 将焦点返回到元素，但无济于事。这把我难住了！

【问题讨论】：

我在 MacOS Safari 上遇到了同样的问题，这可能是一个错误，我想知道是否有黑客可以解决这个问题。
@jcubic a sn-p 真的很有帮助
@IslamElshobokshy 我的演示在这里 codepen.io/jcubic/pen/abdWvvp 这是我正在处理的代码，原始版本在这里 codepen.io/jcubic/pen/YbYpqO 如果你开始输入 foo 或 bar，它会完成标记。

标签： javascript html datalist

【解决方案1】：

我有一个可怕的 hack 给你。

首先，创建一个假输入字段：

const fakeInput = document.createElement('input')
fakeInput.setAttribute('type', 'text')
fakeInput.style.position = 'absolute'
fakeInput.style.opacity = 0
fakeInput.style.height = 0
fakeInput.style.fontSize = '16px'
document.body.prepend(fakeInput)
fakeInput.focus()

接下来，使用setTimeout将焦点设置到你的input，因为直接设置是行不通的：

if(input.value.length > 2) {
    if(!input.hasAttribute('list')) {
      fakeInput.focus();
      input.setAttribute('list', list);
      setTimeout(() => input.focus(), 10);
    }
} else input.removeAttribute('list');

瞧。

【讨论】：

谢谢这是我可以测试的东西，明天将在 BrowserStack 上检查它是如何工作的。看起来很有希望，但需要先检查一下。
我不确定这应该如何工作，我玩了一点，似乎如果你关注输入它会获得焦点但不触发数据列表。这是我正在处理的小型图书馆Tagger。你能在哪里创建演示吗？即使使用 Stack Snippet，我也可以运行。
@jcubic 你有显示问题特征的代码版本吗？
是的标记器演示我已经链接，它包括孔库，所以我可以在 BrowserStack 中测试。它添加了带有完成的数据列表，当添加了超过 2 个字符的列表属性时（使用您的代码），但现在显示完成，因为您需要物理单击输入以显示它。
你能通过显示列表出现的代码版本来帮助我重现吗？我根本看不到列表显示。我还注意到，在您的代码中，input.setAttribute('list', list); 是 inside setTimeout() 调用，这不是有意的。

【解决方案2】：

这可能是一个错误。我认为在 Apple 推出补丁更新之前无法修复它。

因为这个问题也出现在 MacOS Safari 上，而 iOS 基于 MacOS（MacOS Safari 和 iOS Safari 在内部非常相似，只是用户界面不同），这可能是 Safari 处理呈现文本框的方式的一个错误，并且不会在 Apple 修复他们的 HTML 渲染引擎之前无法修复。

【讨论】：