代码之家 › 专栏 › 技术社区 › GalgÃ³czi Levente

如何用javascript设置默认链接?

focus javascript

-1

GalgÃ³czi Levente · 技术社区 · 7 年前

我尝试在模式中设置一个默认链接,但没有成功(我在javascript中很新)。

这是我的全部代码:

    <a href="#my-id" data-uk-modal="{center:true}"></a>
    <button class="md-btn md-btn-success" id="openmodal" data-uk-modal="{target:'#my_id', keyboard: false, bgclose: false}" style="display:none !important;"></button>

    <div class="uk-modal" id="my_id">  
       <div class="uk-modal-dialog">
           <div class="uk-modal-header">
              <div uk-grid class="uk-grid">
                <div class="modal-block">
                 <h3>Project</h3>
    <b>project description, lorem ipsum... <a href="https://www.instagram.com/user/">instagram</a></b>
             </div>
               <div class="modal-block">
               <h3>Terms</h3>
    <b>terms description</b>
              </div>
               <div class="modal-block">
                <h3>Cookies</h3>
    <b>cookies description</b>
               </div>
           </div>
         </div>

                    <div class="uk-modal-footer uk-clearfix">
                    <a id="default-link" uk-tooltip="{title: okay, i accept!; pos: bottom}" class="us--main-button uk-float-right entersite uk-modal-close" href="javascript:void(0)">Accept and enter</a>
                    <a  id="dont-def" uk-tooltip="{title: I do not agree!; pos: bottom}" class="us--leave-button uk-float-right" href="https://google.com">Deny and leave</a>
         </div>
      </div>
    </div>


    <script>
     $(document).ready(function(){
       $('#openmodal').trigger('click');
    })  
    </script>
    <script>
    window.onload = function() {
       document.getElementById("default-link").focus();
    };
    </script>

当我在任何浏览器中打开页面时,默认的链接将是第一个(instagram)…。这是怎么回事?

2 回复 | 直到 7 年前

Asons Oliver Joseph Ash 7 年前

该代码在给予链接焦点时起作用,但是如果一次点击enter(或单击它),则不会发生任何事情,因为您已经用取消了它的操作 href="javascript:void(0)"

下面的示例显示 focus() 工作。

单击“运行代码片段”并按“回车”键,您将收到警报。

window.onload = function() {
    document.getElementById("default-link").focus();
};

<div class="uk-modal" id="my_id">
  <div class="modal-block">
    lorem ipsum... <a href="https://www.instagram.com/user/">instagram</a>
  </div>
  <div class="modal-footer">
    <a id="default-link" class="uk-modal-close" href="javascript:alert('Accept')">Accept and enter</a>
    <a class="uk-float-right" href="https://google.com">Deny cookies and leave</a>
  </div>
</div>

-1

GalgÃ³czi Levente 7 年前

我现在找到了最好的解决方案,因为window.onload会变慢,当站点加载时,默认链接会在当前页面的第一个链接之上…

因此,最好的HTML5解决方案,非常简单,这确实使您的任何项目默认,独立于页面或文档加载:

<div autofocus>