为什么使用 'focus-within' 的按钮在 iOS 上不起作用

Question

我需要一个隐藏的删除按钮，以便在使用标记和 Svelte 中的 CSS 聚焦输入时显示和工作。

我在 OS X 和 Raspberry Pi OS（Chrome、Chromium、Safari 和 Firefox）的浏览器中都能正常工作。 Click here to see it.

问题是该按钮出现但在我的任何 iOS 浏览器（Safari 或 Firefox）中都不起作用。单击删除按钮时没有任何反应。

我试过以下方法：

focus-within works on Android browser but not iOS

这是标记...

<form>
    {#if $todos}
        {#each $todos as { data }, i}
            <div id="todo">
                <button on:click|preventDefault={remove(i + 1)}></button>
                <input
                    bind:value={data.name}
                    on:change={update(i + 1)}
                    size={data.name.length}
                    maxlength="35"
                />
            </div>
        {/each}
    {/if}
</form>

...这是样式...

<style>
    form,
    div {
        display: flex;
        flex-wrap: wrap;
    }

    input {
        border-style: none;
        font-size: 2vh;
    }

    input:focus {
        border-style: solid;
    }

    button {
        visibility: hidden;
        font-size: 2vh;
    }

    #todo:focus-within button {
        visibility: visible;
    }
</style>

form,
div {
  display: flex;
}

form {
  width: 100vw;
}

input {
  border-style: none;
}

input:focus {
  border-style: solid;
}

button {
  visibility: hidden;
}

#todo1:focus-within button {
  visibility: visible;
}

#todo2:focus-within button {
  visibility: visible;
}

#todo3:focus-within button {
  visibility: visible;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Svelte + Node.js API</title>
</head>

<body>
  <h1>To Do</h1>
  <form>
    <div id="todo1">
      <button onclick="alert('Input deleted')"></button>
      <input value="Try it out">
    </div>
    <div id="todo2">
      <button onclick="alert('Input deleted')"></button>
      <input value="Fix the bug">
    </div>
    <div id="todo3">
      <button onclick="alert('Input deleted')"></button>
      <input value="Celebrate">
    </div>
  </form>
</body>

</html>

Answer 1

经过一些调试，事实证明，通过尝试点击按钮，您实际上点击了 <div> 元素本身：

function setLogs(element) {
  element.addEventListener("focus", () => {
    console.log("focus", element);
  });

  element.addEventListener("blur", () => {
    console.log("blur", element);
  });

  for (const child of element.children)
    setLogs(child);
}

setLogs(document.body);

button {
  visibility: hidden;
}

#todo:focus-within button {
  visibility: visible;
}

<div class="content">
  <h1>To Do</h1>
  <form onsubmit="return false">
    <div id="todo">
      <button onclick="console.log('Input deleted')"></button>
      <input value="Try it out">
    </div>
  </form>
</div>

原因是关注一个又一个元素是一个分为两部分的事件：首先，您将焦点从第一个元素移开，然后将焦点设置到第二个元素。通过单击带有按钮的区域，您可以从 <input> 元素中移除焦点。移除焦点导致 :focus-within 不再适用，按钮再次隐藏。因此，当单击事件的第二部分发生时，那里不再有按钮，单击将应用于堆栈中的下一个元素 – <div> 元素本身。

Answer 2

这是一个使用“不透明度”而不是“可见性”的解决方案，它似乎也适用于 iOS 浏览器。

form,
div {
  display: flex;
}

form {
  width: 100vw;
}

input {
  border-style: none;
}

input:focus {
  border-style: solid;
}

button {
  opacity: 0;
}

#todo1:focus-within button {
  opacity: 1;
}

#todo2:focus-within button {
  opacity: 1;
}

#todo3:focus-within button {
  opacity: 1;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Svelte + Node.js API</title>
</head>

<body>
  <h1>To Do</h1>
  <form>
    <div id="todo1">
      <button onclick="alert('Input deleted')"></button>
      <input value="Try it out">
    </div>
    <div id="todo2">
      <button onclick="alert('Input deleted')"></button>
      <input value="Fix the bug">
    </div>
    <div id="todo3">
      <button onclick="alert('Input deleted')"></button>
      <input value="Celebrate">
    </div>
  </form>
</body>

</html>

Answer 3

监听 mousedown 事件而不是 click，您将能够在 iOS 改变焦点之前处理该事件。

在 click 上触发事件是更标准的做法，但在这种情况下，这似乎是 iOS 行为的唯一解决方法。

为什么使用 'focus-within' 的按钮在 iOS 上不起作用

Why button using 'focus-within' is not working on iOS

html

css

svelte