为什么我的输入按钮的onclick事件不起作用？
[英]Why is the onclick event for my input button not working?
问题描述
The onclick -function of the <button> in the following code is not working. 
所述onclick所述的-function <button>在下面的代码不工作。
I want to show a SAVE button when the editable area is clicked. 单击可编辑区域时，我想显示一个“ 保存”按钮。 Then the button's onclick function should display an alert but this is not working. 然后，按钮的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
in your implementation css hides the button before the actual click happens 在您的实现中，css在实际单击发生之前隐藏按钮
here's JS solution that hides button after alert triggered or by timeout when your contenteditable loses its focus 这是JS解决方案，当您的contenteditable失去焦点时，它会在触发警报或超时后隐藏按钮
alternatively you can use opacity instead of visibility in css so it will remain clickable but this feels hacky, someone could click that accidentally so I would not recommend 或者，您可以在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
Try using the below code and add input event to your contenteditable element 尝试使用以下代码，并将输入事件添加到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
I have changed the CSS. 我已经更改了CSS。 You need to change the CSS as per your requirements. 您需要根据需要更改CSS。 But this is the way which you can follow to meet your needs. 但这是您可以遵循的满足您需求的方法。
<!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
The button is hidden that's why you don't see him. 该按钮是隐藏的，这就是为什么您看不到他的原因。 In your style change .views-submit-button to visible and button appears. 在样式中，将.views-submit-button更改为visible，然后出现button。 In your wrapper div class name is .views-submit-button so that's why button is hidden by default. 在包装div中，类名是.views-submit-button，这就是默认情况下隐藏按钮的原因。
.views-submit-button {
visibility: hidden;
}
You can use toggle method to manipulate button's visibility after click 单击后可以使用切换方法来控制按钮的可见性
解决方案5
-3 2018-08-17 09:42:30
The css execute first. css首先执行。 you may use javascript to control it 您可以使用JavaScript进行控制
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.