将焦点设置为已创建的div
[英]Setting focus to created div
问题描述
所以我有一个按钮，可创建可调整大小和可移动的div，并将div添加到容器中。 但是，当我尝试聚焦单击特定div元素时，它不会聚焦。 我认为这与未在Java脚本中执行第二点击功能有关，但可能是错误的。 有小费吗？
$(function(){ $(".createcard").click(function() { var domElement = $('<div class="newcard"></div>'); $('.notecard-container').append(domElement); $('.newcard') .draggable() .resizable(); }); $('.newcard').click(function(){ $(this).siblings(this).css('z-index', 10); $(this).css('z-index', 11); }); });
body, html { margin: 0; padding: 0; } .container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); } .createcard { bottom: 5%; left: 5%; width: 125px; height: 45px; background: rgba(255, 255, 255, 0); position: absolute; display: block; border: 1px solid transparent; outline: none; font-family: sans-serif; font-size: 20px; font-weight: bold; transition: .4s; } .createcard:hover { background: rgba(255, 255, 255, .9); border-radius: 5px; border: 1px solid #c0c0c0; transition: .4s; } .newcard{ position: absolute; width: 150px; height: 150px; min-width:150px; min-height:150px; max-width:300px; max-height:300px; top:10%; left:10%; background: white; border: 1px gray solid; z-index:100; } .notecard-container { position: absolute; top: 7%; left: 2%; right: 2%; bottom: 2%; background: rgb(255, 228, 181); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="index.css"> <meta charset="ISO-8859-1"> <title>Post-it note</title> </head> <body> <div class="container"> <div class="notecard-container"> <button class="createcard">New Card</button> </div> </div> <!-- Input JavaScript and jQuery --> <script src="js/jquery-3.2.0.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="js/index.js"></script> </body> </html>
3 个解决方案
解决方案1
4 2017-04-12 17:43:55
由于newcard是动态生成的，因此在附加click事件时应使用事件委托on() ，例如：
$('.body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
希望这可以帮助。
$(function(){ $(".createcard").click(function() { var domElement = $('<div class="newcard"></div>'); $('.notecard-container').append(domElement); $('.newcard').draggable().resizable(); }); $('.newcard').click(function(){ $(this).siblings(this).css('z-index', 10); $(this).css('z-index', 11); }); });
body, html { margin: 0; padding: 0; } .container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); } .createcard { bottom: 5%; left: 5%; width: 125px; height: 45px; background: rgba(255, 255, 255, 0); position: absolute; display: block; border: 1px solid transparent; outline: none; font-family: sans-serif; font-size: 20px; font-weight: bold; transition: .4s; } .createcard:hover { background: rgba(255, 255, 255, .9); border-radius: 5px; border: 1px solid #c0c0c0; transition: .4s; } .newcard{ position: absolute; width: 150px; height: 150px; min-width:150px; min-height:150px; max-width:300px; max-height:300px; top:10%; left:10%; background: white; border: 1px gray solid; z-index:100; } .notecard-container { position: absolute; top: 7%; left: 2%; right: 2%; bottom: 2%; background: rgb(255, 228, 181); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="container"> <div class="notecard-container"> <button class="createcard">New Card</button> </div> </div>
解决方案2
1 2017-04-12 17:54:00
您要将事件附加到动态元素，可以在此处找到更多信息：
$('body').on('click', '.newcard', function(){
$(this).siblings(this).css('z-index', 10);
$(this).css('z-index', 11);
});
$(function(){ $(".createcard").click(function() { var domElement = $('<div class="newcard"></div>'); $('.notecard-container').append(domElement); $('.newcard') .draggable() .resizable(); }); }); $('body').on('click', '.newcard', function(){ $(this).siblings(this).css('z-index', 10); $(this).css('z-index', 11); });
body, html { margin: 0; padding: 0; } .container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); } .createcard { bottom: 5%; left: 5%; width: 125px; height: 45px; background: rgba(255, 255, 255, 0); position: absolute; display: block; border: 1px solid transparent; outline: none; font-family: sans-serif; font-size: 20px; font-weight: bold; transition: .4s; } .createcard:hover { background: rgba(255, 255, 255, .9); border-radius: 5px; border: 1px solid #c0c0c0; transition: .4s; } .newcard{ position: absolute; width: 150px; height: 150px; min-width:150px; min-height:150px; max-width:300px; max-height:300px; top:10%; left:10%; background: white; border: 1px gray solid; z-index:100; } .notecard-container { position: absolute; top: 7%; left: 2%; right: 2%; bottom: 2%; background: rgb(255, 228, 181); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="index.css"> <meta charset="ISO-8859-1"> <title>Post-it note</title> </head> <body> <div class="container"> <div class="notecard-container"> <button class="createcard">New Card</button> </div> </div> <!-- Input JavaScript and jQuery --> <script src="js/jquery-3.2.0.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="js/index.js"></script> </body> </html>
解决方案3
0 2017-04-12 20:25:01
<div>本身不能接受焦点，因为它既不是交互式元素也不是表单控件 。
您可以通过赋予它tabindex="-1"并将其赋予焦点，然后将其切换为tabindex="0"来强制其接受编程焦点。 失去焦点时将其更改回-1 ，请注意不要对tabindex热心 。
但是，如果您将焦点放在非交互式元素上，则意味着它是一个交互式控件，因此还需要为其指定一个可访问的名称 （在这种情况下，可以使用aria-label或aria-labeledby ），请确保它具有焦点样式 ， 找到合适的角色，以便屏幕阅读器了解为什么可以得到焦点，并且通常将其视为控件。
根据它的功能，您可能希望将其视为非模式对话框控件（具有匹配的键盘交互功能），并且如果其内容溢出，则需要确保键盘用户可以使用它 。
使用 JavaScript 或 Jquery 将焦点设置为动态创建的 DIV
[英]Set focus to dynamically created DIV using JavaScript or Jquery
将初始选项卡焦点设置在新创建的元素上，而不会弄乱屏幕阅读器
[英]setting initial tab focus on newly created element without messing up screen readers
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.