輸入不保持焦點
[英]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.