Question

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

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

它的行为几乎就像在它上面有一个明确的div阻止我的光标访问textarea！

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

我在这里创建了一个模型演示，以显示问题http://bit.ly/1K74vkH 在该页面上，如果您点击看板右侧最后第4列中的卡片，它将打开一个模态窗口。在模态窗口中，您可以单击拒绝＆amp;转到Pending Validation 按钮，使用textarea打开另一个模态，不允许文本输入。

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

之后添加到DOM的所有内容有关

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

下图显示了我的应用中的textarea。我在Chrome Dev工具中选择了textarea，因此您可以看到它没有显示任何内容，您可以在其上看到CSS设置。

除了无法进入textarea中的类型模式外，它也不允许我选择现有文本。现有文本只是我手动设置的测试文本，我放在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

点击看板上最后一列的卡片
在打开的模式中。点击拒绝＆amp;转到待审核按钮
第二个模态打开在第一个模态的顶部，其中有一个textarea文件。此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>

看起来bootstrap modal div上的tabindex属性导致了在打开bootstrap模式时无法编辑textarea的问题。 tabindex属性似乎来自用于模态实现的bootstrap样板，但是，在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>

我有以下图片供您参考。

在加载DOM

1 个答案: