javascript - 在 DOM 加载后添加到 DOM 时，HTML Textarea 不允许我输入内容

Question

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

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

它的行为几乎就像它上面有一个清晰的 div 阻止了我的光标访问文本区域!

在 Chrome 开发工具中检查在我的文本区域顶部没有显示任何内容，因此我真的不知道此问题的原因和解决方案。

我在这里创建了一个模型演示来展示问题 http://bit.ly/1K74vkH在该页面上，如果您单击看板右侧最后第四列中的卡片，它将打开一个模式窗口。然后，在模式窗口中，您可以单击拒绝并移至待验证按钮，该按钮将在带有不允许文本输入的文本区域的所有内容之上打开另一个模式。

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

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

下图显示了我的应用程序中的文本区域。我在 Chrome 开发工具中选择了文本区域，这样您就可以看到它没有显示任何内容，并且您可以看到上面的 CSS 设置。

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

有人知道为什么我无法选择并无法在文本区域中输入内容吗？

在三大浏览器中测试，都有同样的问题!

<小时/>

/*
 * 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. 点击看板最后第四列中的卡片
2. 在打开的模式中。单击拒绝并移至待验证按钮
3. 第二个模式在第一个模式的顶部打开，其中有一个文本区域。该文本区域不允许任何文本输入，甚至不允许焦点!

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>

我有下面的图片供您引用。