个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 14:58:01 25 4
gpt4 key购买 nike

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

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

问题是该按钮出现但在我的任何 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>

最佳答案

通过一些调试，事实证明，通过尝试点击一个按钮，你实际上点击了一个 <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>。元素本身。

关于html - 为什么使用 'focus-within' 的按钮在 iOS 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67570098/

25 4 0
文章推荐： three.js - 未捕获的类型错误 : Cannot read property 'push' of undefined in three. js
文章推荐： python - 如何从数据库中删除或编辑记录
文章推荐： php - 从音译器转换中排除特定字符
文章推荐： javascript - 如何在 IndexedDB 中保存对象？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com