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

Question

我有一个以前从未遇到过的奇怪问题，我的页面上有一个 HTML Textarea 元素，在从我的 DOM 加载后添加到 DOM =74=]申请。

问题是我无法让我的光标在文本区域内进入 type/select 模式。

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

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

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

所以这让我觉得这可能与在 DOM 加载

之后所有这些都被添加到 DOM 有关

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

下图显示了我的应用程序中的文本区域。我在 Chrome 开发工具中编辑了文本区域 select，因此您可以看到它没有显示任何内容，您可以看到上面的 CSS 设置。

此外，除了无法在文本区域中进入类型模式外，它还不允许我 select 现有文本。现有文本只是我从输入文本区域代码的位置手动设置的测试文本。

有人知道为什么我不能 select 并获得在文本区域中输入的权限吗？

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

/*
 * 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

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

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>

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

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

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

下面有图片供大家参考。

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

HTML Textarea will not allow me to type in it when added to DOM after DOM loaded

javascript

jquery

textarea