為什么我的輸入按鈕的onclick事件不起作用？
[英]Why is the onclick event for my input button not working?
問題描述
所述onclick所述的-function <button>在下面的代碼不工作。
單擊可編輯區域時，我想顯示一個“ 保存”按鈕。 然后，按鈕的onclick功能應顯示一個警報，但這不起作用。
.views-submit-button { visibility: hidden; } .views-exposed-widget:focus-within+.views-submit-button { visibility: visible; }
<!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> </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>
5 個解決方案
解決方案1
2 已采納 2018-08-17 09:48:13
在您的實現中，css在實際單擊發生之前隱藏按鈕
這是JS解決方案，當您的contenteditable失去焦點時，它會在觸發警報或超時后隱藏按鈕
或者，您可以在CSS中使用opacity而不是visibility ，因此它將保持可單擊狀態，但是這感覺很hack，有人可能不小心單擊了該位置，所以我不推薦
.views-submit-button { visibility: hidden; }
<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> <div class="container"> <div class="views-exposed-widget"> <div tabindex="1" contenteditable id="editable-text-name" onfocusin="document.getElementById('save-button').style.visibility = 'visible'" onfocusout="setTimeout(function(){document.getElementById('save-button').style.visibility = 'hidden'}, 100)"> Editable text here. </div> </div> <div class="views-submit-button"> <button id="save-button" type="button" onclick="alert('button clicked.');this.style.visibility = 'hidden';" class="btn btn-outline-dark">Save</button> </div> </div>
解決方案2
0 2018-08-17 10:12:30
嘗試使用以下代碼，並將輸入事件添加到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>
解決方案3
-1 2018-08-17 10:18:42
我已經更改了CSS。 您需要根據需要更改CSS。 但這是您可以遵循的滿足您需求的方法。
<!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> .button { display: none; } input:hover + .button, .button:hover { display: inline-block; } </style> </head> <body> <div class="small-4 columns"> <input type="text" value="Hi" /> <button class="button" onclick="alert('Hello');">Click Me</button> </div> </body> </html>
解決方案4
-2 2018-08-17 09:59:13
該按鈕是隱藏的，這就是為什么您看不到他的原因。 在樣式中，將.views-submit-button更改為visible，然后出現button。 在包裝div中，類名是.views-submit-button，這就是默認情況下隱藏按鈕的原因。
.views-submit-button {
visibility: hidden;
}
單擊后可以使用切換方法來控制按鈕的可見性
解決方案5
-3 2018-08-17 09:42:30
css首先執行。 您可以使用JavaScript進行控制
某些用戶在chrome中無法使用輸入按鈕類型的onclick事件
[英]onclick event of input button type is not working in chrome for some users
OnClick() 事件在我的代碼中的動態按鈕的 JavaScript 中不起作用
[英]OnClick() event is not working in JavaScript for dynamic button in my code
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.