为什么在iOS上使用'focus-within'属性的按钮无法正常工作

Question

为什么在iOS上使用'focus-within'属性的按钮无法正常工作

htmlcsssvelte

3

我需要在Svelte中使用标记和CSS使隐藏的删除按钮在焦点输入时出现并起作用。

我已经在OS X和树莓派OS的浏览器中（Chrome、Chromium、Safari和Firefox）实现了所有功能。单击此处查看。

问题是，在我的iOS浏览器（Safari或Firefox）中，该按钮虽然出现，但无法正常工作。单击删除按钮时没有任何反应。

我尝试过以下方法：

以下是标记...

<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>

- Mattias Inokuchi

3个回答

0

监听 mousedown 事件而不是 click，这样你就能在 iOS 改变焦点之前处理事件了。

一般来说，在 click 上触发事件更符合标准实践，但在这种情况下似乎只有这个方法可以解决 iOS 的行为问题。

- shadow-light

谢谢您的建议！我尝试了，但不幸的是它破坏了我的程序。"Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource." - Mattias Inokuchi

网络错误与此问题无关，更多的是与您的特定应用程序有关，而不是让按钮在iOS上触发。 - shadow-light

0

这是一个使用“不透明度”而不是“可见性”的解决方案，看起来也适用于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>

- Mattias Inokuchi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parzh from Ukraine · Accepted Answer

经过一些调试，发现当你尝试点击一个按钮时，实际上你点击的是一个<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>元素本身。