Question

我想仅在单击按钮后使用Javascript使表单字段可编辑。在第一种状态（只读）中，我想使框架不可见，并将指针事件设置为“ none”。该按钮应该是一个复选框，但是与下面的测试框架不同，它对输入字段没有影响。

label.toggle {color:white; background: darkred;padding: 0.1rem .3rem;border-radius: 0.5rem;}
.visually-hidden {position: absolute;left: -100vw;}

.toggle_edit {color:black;   border:1px solid #FFFFFF;}
#toggle:checked ~ .toggle_edit {color:darkred; border:1px solid #000000;}
                  input.toggle_edit {color:black; border:1px solid #FFFFFF;}
#toggle:checked ~ input.toggle_edit {color:darkred;  border:1px solid #000000; pointer-events: none;}

<div> <!-- toggle -->
  <label class="toggle" for="toggle">bearbeiten</label><input type="checkbox" id="toggle" class="visually-hidden">
  <table>
    <form action="functions/edit.php" method="post" target="editframe"> 
      <tr>
        <th>Name</th>
        <td><input type="text" class="toggle_edit" name="justus" value="Justus" size="30" maxlength="50" ></td>
      </tr> 
      <input type="Submit" name="absenden" value="absenden"></form>
  </table>
  <div class="toggle_edit">Testframe</div> 
</div> <!-- toggle -->

Answer 1

主要问题是~（“通用同级组合器”）选择在~（https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator）之前的元素之后的兄弟元素

在您的示例中，input.toggle_edit不是复选框的同级项（“ Geschwister”）。相反，其祖先table是同级。因此，您必须按照以下CSS中第table行中的说明添加#toggle:checked~table input.toggle_edit。

我也了解，如果选中此复选框，则您希望input是可编辑的。您的代码似乎想要相反。这就是为什么我将pointer-events: none替换为pointer-events:auto并在以后添加了pointer-events:none的原因。

<div> <!-- toggle -->
  <label class="toggle" for="toggle">bearbeiten</label><input type="checkbox" id="toggle" class="visually-hidden">
  <table>
    <form action="functions/edit.php" method="post" target="editframe"> 
      <tr>
        <th>Name</th>
        <td><input type="text" class="toggle_edit" name="justus" value="Justus" size="30" maxlength="50" ></td>
      </tr> 
      <input type="Submit" name="absenden" value="absenden"></form>
  </table>
  <div class="testframe">Testframe</div> 
</div> <!-- toggle -->

label.toggle {
  color: white;
  background: darkred;
  padding: 0.1rem .3rem;
  border-radius: 0.5rem;
}

.visually-hidden {
  position: absolute;
  left: -100vw;
}

.toggle_edit {
  color: black;
  border: 1px solid #FFFFFF;
}

#toggle:checked~.toggle_edit {
  color: darkred;
  border: 1px solid #000000;
}

input.toggle_edit {
  color: black;
  border: 1px solid #FFFFFF;
}

/* main problem was the missing table on the next line*/
#toggle:checked~table input.toggle_edit {
  color: darkred;
  border: 1px solid #000000;
  pointer-events: auto;
}

.toggle_edit {
  pointer-events: none;
}

#toggle:checked~table~.testframe {
  visibility:hidden;
}

切换输入字段可编辑

1 个答案: