加载 DOM 后添加到 DOM 时，HTML Textarea 将不允许我输入

Question

我有一个以前从未遇到过的奇怪问题，我在从我的 JavaScript 应用程序中加载 DOM 后添加到 DOM 的页面上有一个 HTML Textarea 元素。

问题是我无法让光标进入文本区域内的类型/选择模式。

它的作用几乎就像它上面有一个清晰的 div，它阻止我的光标访问文本区域！

在 Chrome 开发工具中检查显示我的 textarea 顶部没有任何内容，所以我真的迷失了这个问题的原因和解决方案。

我在这里创建了一个模型演示来显示问题http://bit.ly/1K74vkH 在该页面上，如果您单击看板右侧最后 4 列中的卡片，它将打开一个模式窗口。然后，在模态窗口中，您可以单击 Reject & Move to Pending Validation 按钮，该按钮会在所有内容之上打开另一个模态，其文本区域不允许文本输入。

所以这让我觉得这可能与加载 DOM 后添加到 DOM 中的所有内容有关

我的应用程序有模态窗口，可以将订单数据库记录打开到其中。构建了几个不同的模式窗口，这就是为什么在 DOM 加载后生成内容的原因。创建的内容取决于点击的订单项目的类型。

下图显示了我的应用中的文本区域。我在 Chrome 开发工具中选择了 textarea，所以你可以看到它没有显示任何覆盖它的东西，你可以看到上面的 CSS 设置。

除了无法在文本区域中进入类型模式之外，它也不允许我选择现有文本。现有文本只是我在 textarea 代码中手动设置的测试文本。

有谁知道为什么我不能选择并获得在 textarea 中输入的权限？

在三大浏览器中测试，都存在相同的问题！

---

/*
 * jQuery Confirmation Dialog Popup/Modal Window for Deletion approvals and other
 *  similar user actions that require user approval.  This is to replace the browsers
 *  default Dialog confirmation windows.
 *  http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
 */ (function($) {
     $.confirm = function(params) {
         if ($('#confirmOverlay').length) {
             // A confirm is already shown on the page:
             return false;
         }

         var buttonHTML = '';
         $.each(params.buttons, function(name, obj) {

             // Generating the markup for the buttons:
             buttonHTML += '<a href="#" class="button ' + obj['class'] + '">' + name + '</a>';
             if (!obj.action) {
                 obj.action = function() {};
             }
         });

         var markup = ['<div id="confirmOverlay">', '<div id="confirmBox">', '<h1>', params.title, '</h1>', '<p>', params.message, '</p>', '<div id="confirmButtons">',
                       buttonHTML, '</div></div></div>'].join('');

         $(markup).hide().appendTo('body').fadeIn();

         var buttons = $('#confirmBox .button'),
             i = 0;

         $.each(params.buttons, function(name, obj) {
             buttons.eq(i++).click(function() {

                 // Calling the action attribute when a
                 // click occurs, and hiding the confirm.

                 obj.action();
                 $.confirm.hide();
                 return false;
             });
         });
     }
     $.confirm.hide = function() {
         $('#confirmOverlay').fadeOut(function() {
             $(this).remove();
         });
     }
 })(jQuery);





$(document).on('click', '#btn-reject-move-to-DraftingStage1', function(e) {

    console.log('info', 'ID:btn-reject-move-to-DraftingStage1 clicked on');

    // Show a confirmation Dialog to save new order status or reject and move order back to previous column
    $.confirm({
        'title': 'Reject & Move Back to Drafting Stage 1?',
        'message': 'You are about to update this order item Status to : Drafting Stage 1. <br />Do you wish to Continue?<br><textarea id="comment-reject-2-drafting-stage-1">test</textarea>',
        'buttons': {
            'Yes, Reject & Move Back to Drafting Stage 1': {
                'class': 'blue',
                'action': function() {

                    var commentText = $('#comment-reject-2-drafting-stage-1').val();
                    alert('commentText = '+commentText);

                    // make AJAX request to update order record status

                }
            },
            'Cancel': {
                'class': 'gray',
                'action': function() {
                    // need to move the order card back to its previous status column somehow!
                    //$(ui.sender).sortable('cancel');

                }
            }
        }
    });
    e.preventDefault(); // prevents default
    return false;
});

---

更新演示

为了展示非常罕见的真正问题，我必须提供一个现场演示，所以这里是：http://bit.ly/1K74vkH

1. 单击看板最后第 4 列中的卡片
2. 在打开的模式中。点击拒绝并移至等待验证按钮
3. 第二个模态在第一个模态的顶部打开，该模态具有一个 textarea 文件。此文本区域不允许任何文本输入甚至焦点！

Answer 1

问题似乎出在这个 div 上：

<div class="modal fade in" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="false" style="display: block;"><!--Modal stuff goes here--></div>

似乎是引导模式 div 上的 tabindex 属性导致了在打开引导模式时无法编辑文本区域的问题。 tabindex 属性似乎来自其模态实现的引导样板，但是，在 Chrome 和 IE 中进行大量实验后，我发现删除 tabindex 属性将允许在外部模态窗口中编辑 textarea 元素。

你的 div 结果应该是这样的：

<div class="modal fade in" id="orderModal" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="false" style="display: block;"><!--Modal stuff goes here--></div>

我有下面的图片供你参考。