输入不保持焦点
[英]Input doesn't hold focus
问题描述
由于某种原因，我的输入没有保持焦点（除非我按住左键单击并键入）。
我用JQuery尝试了一些动画技巧，但我并不习惯，所以我想可能与它有关。
$(document).ready(function() { $('.tariffCards > div').click(function() { $(this).siblings().fadeOut(200); $('.tariffCards > div h3').fadeOut(200); $('.tariffCards > div span').fadeOut(200); $(this).css({ "transition": "all .9s ease-in-out", "transform": 'rotateY(-180deg) translateX(-90%)', "height": "35vw", 'z-index': 2 }); $('.form-report').appendTo(this).css({ "display": "inherit", "transform": "scaleX(-1)" }); $('.form-report > a').focus() }); });
.tariffCards { position: absolute; top: 100%; left: 25%; transform-style: preserve-3d; z-index: 1; } .tariffCards:after { position: absolute; bottom: -27px; left: 5%; content: ''; width: 65%; height: 10px; border-radius: 100%; background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0)); } .tariffCards>div { position: relative; width: 330px; height: 180px; border-radius: 12px; color: #fff; transform: rotateX(45deg) rotateY(-15deg) rotate(45deg); transition: all 0.4s ease; overflow: hidden; cursor: pointer; } .tariffCards>div:after { position: absolute; top: -70px; left: 0; content: ''; width: 200%; height: 200%; /*background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);*/ transform: translateX(-100%); } .tariffCards>div h3 { position: absolute; bottom: 28%; left: 50%; font-size: 18px; font-weight: 800; transform: rotate(-90deg); } #movi3 h3 { bottom: 15% !important; left: 57% !important; } #flry3 h3 { bottom: 23% !important; } #pard3 h3 { bottom: 35% !important; left: 43% !important; } .tariffCards>div span { position: absolute; font-weight: 700; width: 100%; left: 35%; top: -6%; /*left: 75%;*/ font-size: 12px; opacity: 0.8; transform: rotate(-90deg); } .tariffCards>.lren { margin-top: 0; z-index: 3; background-color: #8063e1; background-image: linear-gradient(135deg, #bd7be8, #8063e1); box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1; } .tariffCards>div.movi { margin-top: -70px; z-index: 2; background-color: #3f58e3; background-image: linear-gradient(135deg, #7f94fc, #3f58e3); box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3; } .tariffCards>div.flry { margin-top: -70px; z-index: 100; background-color: #2c6fd1; /*background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);*/ box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1; } .tariffCards>div.pard { margin-top: -70px; background-color: #352f64; background-image: linear-gradient(135deg, #415197, #352f64); box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.9), 1px 1px 0px 1px #352f64; } .tariffCards>div:hover { transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px); } .tariffCards>div:hover:after { transform: translateX(100%); transition: all 1.2s ease-in-out; } /*Formulário de inscrição*/ .form-report { display: none; font-family: Lato; margin: 0 auto; text-align: center; transition: all 2s; width: 80%; z-index: 3; } .form-report form { margin-top: 10%; margin-bottom: 5%; z-index: 3; } .form-report form input { color: black; width: 100%; z-index: 3; } .container-btn a { background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%); border: none; border-radius: 100px; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); ; color: #fff; display: inline-block; font-size: 1.3em; padding: 5% 10%; transition: all .2s; } .container-btn a:hover { transform: translateY(-3px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="tariffCards"> <div class="lren"> <h3>Lojas Renner<br><br>$LREN3</h3> <span>Atualizado em 2T19</span> </div> <div class="movi" id='movi3'> <h3>Movida<br><br>$MOVI3</h3> <span>Atualizado em 2T19</span> </div> <div class="flry" id='flry3'> <h3>Fleury SA<br><br>$FLRY3</h3> <span>Atualizado em 2T19</span> </div> <div class="pard" id='pard3'> <h3>Hermes Pardini<br><br>$PARD3</h3> <span>Atualizado em 2T19</span> </div> </div> <!--Form aberto ao clicar no relatório--> <div class='form-report'> <h2>Receba agora.</h2> <form> <input type="text" placeholder="Nome"> <br/> <input type="text" placeholder="Seu Email"> <br/> <input type="text" placeholder="Celular (SMS de Confirmação)"> </form> <br/> <div class='container-btn'> <a href="#">Conheça o Curso </a> </div> </div> </body>
1 个解决方案
解决方案1
3 2019-08-27 03:10:34
当您单击价目表时，它将使用$('.form-report').appendTo(this)在您单击的DIV中移动表单。 然后，当您单击表单中的输入时，单击会冒泡到DIV，因此单击处理程序将再次运行，并且$('.form-report > a').focus()会将焦点更改为链接。
为该表单添加一个单击处理程序，以防止事件通过e.stopPropagation();冒泡e.stopPropagation();
$(document).ready(function() { $('.tariffCards > div').click(function() { $(this).siblings().fadeOut(200); $('.tariffCards > div h3').fadeOut(200); $('.tariffCards > div span').fadeOut(200); $(this).css({ "transition": "all .9s ease-in-out", "transform": 'rotateY(-180deg) translateX(-90%)', "height": "35vw", 'z-index': 2 }); $('.form-report').appendTo(this).css({ "display": "inherit", "transform": "scaleX(-1)" }); $('.form-report > a').focus() }); $('.form-report').click(function(e) { e.stopPropagation(); }); });
.tariffCards { position: absolute; top: 100%; left: 25%; transform-style: preserve-3d; z-index: 1; } .tariffCards:after { position: absolute; bottom: -27px; left: 5%; content: ''; width: 65%; height: 10px; border-radius: 100%; background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0)); } .tariffCards>div { position: relative; width: 330px; height: 180px; border-radius: 12px; color: #fff; transform: rotateX(45deg) rotateY(-15deg) rotate(45deg); transition: all 0.4s ease; overflow: hidden; cursor: pointer; } .tariffCards>div:after { position: absolute; top: -70px; left: 0; content: ''; width: 200%; height: 200%; /*background-image: linear-gradient(60deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.1), rgba(255,255,255,0) 80%);*/ transform: translateX(-100%); } .tariffCards>div h3 { position: absolute; bottom: 28%; left: 50%; font-size: 18px; font-weight: 800; transform: rotate(-90deg); } #movi3 h3 { bottom: 15% !important; left: 57% !important; } #flry3 h3 { bottom: 23% !important; } #pard3 h3 { bottom: 35% !important; left: 43% !important; } .tariffCards>div span { position: absolute; font-weight: 700; width: 100%; left: 35%; top: -6%; /*left: 75%;*/ font-size: 12px; opacity: 0.8; transform: rotate(-90deg); } .tariffCards>.lren { margin-top: 0; z-index: 3; background-color: #8063e1; background-image: linear-gradient(135deg, #bd7be8, #8063e1); box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1; } .tariffCards>div.movi { margin-top: -70px; z-index: 2; background-color: #3f58e3; background-image: linear-gradient(135deg, #7f94fc, #3f58e3); box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3; } .tariffCards>div.flry { margin-top: -70px; z-index: 100; background-color: #2c6fd1; /*background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);*/ box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1; } .tariffCards>div.pard { margin-top: -70px; background-color: #352f64; background-image: linear-gradient(135deg, #415197, #352f64); box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.9), 1px 1px 0px 1px #352f64; } .tariffCards>div:hover { transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px); } .tariffCards>div:hover:after { transform: translateX(100%); transition: all 1.2s ease-in-out; } /*Formulário de inscrição*/ .form-report { display: none; font-family: Lato; margin: 0 auto; text-align: center; transition: all 2s; width: 80%; z-index: 3; } .form-report form { margin-top: 10%; margin-bottom: 5%; z-index: 3; } .form-report form input { color: black; width: 100%; z-index: 3; } .container-btn a { background-image: linear-gradient(56deg, #08AEEA 0%, #2AF598 100%); border: none; border-radius: 100px; box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2); ; color: #fff; display: inline-block; font-size: 1.3em; padding: 5% 10%; transition: all .2s; } .container-btn a:hover { transform: translateY(-3px); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="tariffCards"> <div class="lren"> <h3>Lojas Renner<br><br>$LREN3</h3> <span>Atualizado em 2T19</span> </div> <div class="movi" id='movi3'> <h3>Movida<br><br>$MOVI3</h3> <span>Atualizado em 2T19</span> </div> <div class="flry" id='flry3'> <h3>Fleury SA<br><br>$FLRY3</h3> <span>Atualizado em 2T19</span> </div> <div class="pard" id='pard3'> <h3>Hermes Pardini<br><br>$PARD3</h3> <span>Atualizado em 2T19</span> </div> </div> <!--Form aberto ao clicar no relatório--> <div class='form-report'> <h2>Receba agora.</h2> <form> <input type="text" placeholder="Nome"> <br/> <input type="text" placeholder="Seu Email"> <br/> <input type="text" placeholder="Celular (SMS de Confirmação)"> </form> <br/> <div class='container-btn'> <a href="#">Conheça o Curso </a> </div> </div> </body>
在Firefox 16.0.2中，输入文本中的焦点或自动焦点不起作用
[英]Focus or Autofocus in Input Text doesn't work in Firefox 16.0.2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.