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

-

i have strange issue have never had before have html textarea element on page added dom after dom loaded within javascript application.

the issue cannot cursor go type/select mode inside textarea.

it acts if there clear div on top of blocking cursor access textarea!

inspecting in chrome dev tools shows nothing on top of textarea though lost cause , solution issue.

i created mockup demo here show problem http://bit.ly/1k74vkh on page if click card in last 4th column right of kanban boards open modal window. in modal window can click on reject & move pending validation button open modal on top of textarea not allow text entry.

so makes me think might related being added dom after dom loaded

my app has modal windows open order database records them. there several different modal windows built why content generated after dom loaded. content created determined on type of order item clicked on.

this image below shows textarea in app. have textarea selected in chrome dev tools can see doesn't show covering , can see css settings on it.

also beside not being able type mode in textarea, not allow me select existing text. existing text test text set manually put in textarea code.

does have idea why can't select , gain access type in textarea?

tested in big 3 browsers, have same issue!

enter image description here

/*  * jquery confirmation dialog popup/modal window deletion approvals , other  *  similar user actions require user approval.  replace browsers  *  default dialog confirmation windows.  *  http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/  */ (function($) {      $.confirm = function(params) {          if ($('#confirmoverlay').length) {              // confirm shown on page:              return false;          }           var buttonhtml = '';          $.each(params.buttons, function(name, obj) {               // generating markup 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'),              = 0;           $.each(params.buttons, function(name, obj) {              buttons.eq(i++).click(function() {                   // calling action attribute when                  // click occurs, , hiding 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 confirmation dialog save new order status or reject , move order previous column     $.confirm({         'title': 'reject & move drafting stage 1?',         'message': 'you update order item status : drafting stage 1. <br />do wish continue?<br><textarea id="comment-reject-2-drafting-stage-1">test</textarea>',         'buttons': {             'yes, reject & move drafting stage 1': {                 'class': 'blue',                 'action': function() {                      var commenttext = $('#comment-reject-2-drafting-stage-1').val();                     alert('commenttext = '+commenttext);                      // make ajax request update order record status                  }             },             'cancel': {                 'class': 'gray',                 'action': function() {                     // need move order card previous status column somehow!                     //$(ui.sender).sortable('cancel');                  }             }         }     });     e.preventdefault(); // prevents default     return false; });

updated demo

to show real issue rare had come live demo here is: http://bit.ly/1k74vkh

  1. click card in last 4th column of kanban boards
  2. in modal opens. click on reject & move pending validation button
  3. a 2nd modal opens on top of first modal has textarea filed. textarea not allow text entry or focus!

the issue appears 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>

it appears tabindex property on bootstrap modal div causing issue textarea cannot edited when bootstrap modal opened. tabindex property appears come bootstrap boilerplate modal implementation, however, after experimentation in chrome , ie, have discovered removing tabindex property allow editing of textarea element in outer modal window.

your div should result:

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

i have images below reference.

the div in question

the tabindex property removed

success!


Comments

Post a Comment

Popular posts from this blog

html - Firefox flex bug applied to buttons? -

-
i'm trying apply flex button on firefox i'm having problem on chrome doesn't happens. this css: .button { display: inline-flex; align-items: center; } as can see in fiddle, "caret" word moved new line, happens if element <button> tag, <div> works expected. http://codepen.io/anon/pen/xblmgx is firefox bug or there css i'm missing? nevermind, looks "mr firefox" doesn't idea... <button> not implementable (by browsers) in pure css, bit of black box, perspective of css. means don't react in same way e.g. <div> would. this isn't specific flexbox -- e.g. don't render scrollbars if put "overflow:scroll" on button, , don't render table if put "display:table" on it. stepping further, isn't specific <button> . consider <fieldset> , <table> have special rendering behavior: data:text/html,<fieldset style="d...
Read more

html - Missing border-right in select on Firefox -

-
Image
when put select div width , padding-left, options have no border on right. more, happend if select have width 118px , parent have 15px of padding left! have idea, going on? my code: <!doctype html> <html> <head lang="en"> </head> <body> <div style="width: 1000px; padding-left: 15px;"> <select style="width: 118px;"> <option>a</option> <option>b</option> <option>c</option> </select> </div> </body> </html> and result: here plunker: click it happend on firefox on windows. tested on 40.0.2 version -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; source: https://stackoverflow.com/a/11390432/4431269 source of problem: https://bugzilla.mozilla.org/show_bug.cgi?id=924068 and use of google ! edit: (source of problem, explained) after rea...
Read more

python - build a suggestions list using fuzzywuzzy -

-
i building suggestion engine database. i'm using fuzzywuzzy module match user input string existing database shown below. if request.method == "get": display_dict = {} user_input = request.get["user_input"] # user input match_dict = {} food_items_obj = food_items.objects.all() # fetch objects table items in food_items_obj : match = fuzz.ratio(user_input.lower(),items.name.lower()) # try match user input existing names match_dict[match] = items.name # put 1 dictionary matched_dict = ordereddict(sorted(match_dict.items(),reverse = true)) # sort dictionary if max(matched_dict.keys()) == 100: # if exact match put in dict , return display_dict[100] = matched_dict[100] else : # if not found try best matching words.. ###########this part need help! ############# k,v in matched_dict.items(): if user_input in v : display_dict[k]...
Read more