我有一个从未遇到过的奇怪问题，在页面上有一个HTML Textarea元素，该元素在从我的JavaScript应用程序中加载DOM之后被添加到DOM中。
问题是我无法使光标进入文本区域内的类型/选择模式。
它的作用几乎就像是在其顶部有一个清晰的div一样，阻止了我的光标对文本区域的访问！
尽管在Chrome Dev工具中进行检查在我的文本区域上什么都没有显示，所以我真的迷失了这个问题的原因和解决方案。
我在这里创建了一个样机演示来显示问题http://bit.ly/1K74vkH
在该页面上，如果单击看板右侧最后第四列中的卡，它将打开一个模式窗口。然后，在模式窗口中，您可以单击“拒绝并移动到待验证”按钮，该按钮将在所有带有文本区域的文本上方打开另一个模式，该文本区域不允许输入文本。
因此，我认为这可能与在DOM加载后将所有这些都添加到DOM中有关
我的应用程序具有模式窗口，可在其中打开订单数据库记录。构建了几个不同的模式窗口，这就是为什么在加载DOM之后生成内容的原因。创建的内容取决于单击的订单项的类型。
下图显示了我在应用程序中的文本区域。我在Chrome Dev工具中选择了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
单击看板的最后第四列中的卡
在打开的模式中。单击“拒绝并移动到待验证”按钮
第二个模态在第一个模态的顶部打开，该模态已归档。此文本区域不允许输入任何文本，甚至无法聚焦！
最佳答案
问题似乎出在这个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>
我下面有图像供您参考。
关于javascript - 在加载DOM后添加到DOM时，HTML Textarea不允许我输入，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32101103/