【问题标题】:Zurb foundation can't focus input field inside modalZurb 基础无法将输入字段聚焦在模态中
【发布时间】:2017-09-26 06:12:00
【问题描述】:

当我使用 ZURB Foundation 框架显示模式时,我试图在表单中设置输入字段的焦点。如果在我一段时间以来一直无法找到解决方案之前有人问过这个问题,我真的很抱歉。

这就是我所拥有的:

<div id="myModal" class="reveal-modal" data-reveal>
   <form action="php_scripts/post_message.php" method="POST" name="modalForm" id="modalForm">
      <label for="curse">Пиши си овде:</label>
      <textarea type="text" name="curse" id="curse" placeholder="Напиши што ти душа сака.." required="true"></textarea>
      <input type="submit" name="submit" class="button secondary tiny right" value="OK">
   </form>
   <a class="close-reveal-modal">&#215;</a>
</div>

每次我点击一个按钮时,这个模式都会弹出,我希望我的输入字段(textarea)在我这样做时处于焦点。我尝试添加autofocus 属性,并尝试在单击按钮或此 div 显示或加载时使用 javascript 设置焦点(onshow 和 onload 方法)。似乎没有什么对我有用,所以任何帮助都将不胜感激。

【问题讨论】:

    标签: html input modal-dialog zurb-foundation zurb-foundation-5


    【解决方案1】:

    我认为你必须使用 JS 或 jQuery 来处理这样的打开事件..

    $(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
      var modal = $(this);
      modal.find('[autofocus]').focus();
    });
    

    演示:http://codeply.com/go/Ahs4oZDsWn

    【讨论】:

    • 非常感谢我检查了演示,它工作正常,但由于我主要使用 Javascript 而不是 Jquery,我不太了解代码是否有可能你给我非 Jquery 解决方案?如果没有,我就用这个谢谢:)
    • AFAIK js 是唯一途径
    • 是的,我成功了,再次感谢您。当我看到我需要学习它时,我会检查那个 jquery。 : ]
    【解决方案2】:

    在 Foundation 6 中,事件名称已更改:

    $(document).on('open.zf.reveal', '[data-reveal]', function () {
        console.log('asdfasdfsadf')
        var modal = $(this);
        modal.find('[autofocus]').focus();
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多