开启自举模式时,Textarea无法获得焦点

时间:2017-03-10 07:04:12

标签: javascript html bootstrap-modal

http://jsfiddle.net/h3WDq/1921/

打开模态时,我无法键入textarea。

Textarea不是模态的,具有大z-index的绝对定位。

<textarea style='position:absolute;z-index:200000'></textarea>

任何人都可以覆盖此问题吗?

4 个答案:

答案 0 :(得分:1)

如果有人在使用 Bootstrap Vue 并看到同样的问题:

Bootstrap Vue 提供了一个名为“ignore-enforce-focus-selector”的 b-modal 属性。您可以使用此属性提供一个选择器(包括逗号分隔的选择器列表),该选择器指定即使在模态可见时也可以聚焦的元素。就我而言,我有许多 textarea 元素需要在模态可见时可聚焦。将“ignore-enforce-focus-selector”设置为“textarea”可以在模态可见时编辑这些文本区域。

https://bootstrap-vue.org/docs/components/modal#keyboard-navigation

答案 1 :(得分:0)

<textarea style='position:absolute;z-index:200000' autofocus></textarea>

答案 2 :(得分:0)

tabindex="-1"移除<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">即可。不明白为什么tabindex会造成这个问题。

答案 3 :(得分:0)

看起来line of code是每次显示模态时Bootstrap强制执行焦点的问题。因此,让我们每次都删除该事件:

$('#myModal1').on('shown.bs.modal', function (e) {
  $(document).off('focusin.modal');
})

请参阅fiddle