Question

以下代码中onclick的{{1}}功能不起作用。

我想在单击可编辑区域时显示一个 SAVE 按钮。然后，按钮的<button>功能应显示一个警报，但这不起作用。

onclick

.views-submit-button {
  visibility: hidden;
}

.views-exposed-widget:focus-within+.views-submit-button {
  visibility: visible;
}

Answer 1

在您的实现中，css在实际点击发生之前将按钮隐藏

这是一种JS解决方案，当您的GBQ失去焦点时，它会在触发警报或超时后隐藏按钮

或者，您可以在CSS中使用contenteditable而不是opacity，以便它仍然可以单击，但是这很容易理解，有人可以不小心点击它，所以我不推荐

visibility

.views-submit-button {
  visibility: hidden;
}

Answer 2

尝试使用以下代码，并将输入事件添加到您的contenteditable元素中

$(document).ready(function() {
  var isEditClicked = false;

  document.getElementById("editable-text-name").addEventListener("input", function() {
    $(".views-submit-button").css("visibility", "visible");
  }, false);
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <title></title>


  <style>
    .views-submit-button {
      visibility: hidden;
    }
    
    .views-exposed-widget:focus-within+.views-submit-button {
      visibility: visible;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="views-exposed-widget">
      <div contenteditable id="editable-text-name">
        Editable text here.
      </div>
    </div>
    <div class="views-submit-button">
      <button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
    </div>
  </div>
</body>

</html>

Answer 3

按钮被隐藏，这就是为什么您看不到他的原因。在样式中，将.views-submit-button更改为visible，然后出现button。在包装div中，类名是.views-submit-button，这就是默认情况下隐藏按钮的原因。

.views-submit-button {
          visibility: hidden;
}

点击后，您可以使用切换方法来控制按钮的可见性

Answer 4

我更改了CSS。您需要根据需要更改CSS。但这是您可以遵循的满足您需求的方法。

\(.*?, Japan\)|\(Japan, .*?\)|\(.*?, Japan, .*?\)|\(.*?Japan.*?\)

Answer 5

css首先执行。您可以使用javascript进行控制

为什么我的输入按钮的onclick事件不起作用？

5 个答案: