Javascript CTRL-C is triggered in </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2015-08-06T17:10:16.517" class="fromnow">Aug 06 '15 at 17:10</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2015-08-06T18:16:56.740" datetime="2015-08-06T18:16:56.740">Aug 06 '15 at 18:16</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,059 times"> <span class="fc-light mr2">Viewed</span> 1,059 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="31861827" data-ownerid="5161483" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="31861827"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Sorry, I am not a very best Javascript-programmer, but I am making a homepage for my website ( <a class="external-link" href="http://coins.kalf999.com/menu.php" rel="nofollow">http://coins.kalf999.com/menu.php</a>) and I was producing some code, but I was suprised it did not work untill....now!</p> <p>But I still not understand why.... Who can help me..?</p> <p>I made some small code to show the difference.</p> <p>In the 1st textarea I can copy some text, press CTRL-C, which hides the textarea and you can test the contents of the clipboard in the 2nd textarea. I use a 1 millescond setTimeout-function, which works !</p> <p>My old code was the second example: In the 3rd textarea I can copy some text again, press CTRL-C, which hides the textarea and test the contents of the clipboard in the 4rd textarea. I not use setTimeout-function, which , obviously, not works !</p> <p>I can not imagine that a "hidden" object is creating a malfunction for a Copy-command.....</p> <p>What happens over here...? ;(</p> <p>I made test-program called tst.html and tst.js</p> <pre><code><html> <head> <script type="text/javascript" src="tst.js"></script> </head> <body> <div id = "box1"></div> <div id = "testarea1"></div> <div id = "box2"></div> <div id = "testarea2"></div> <script> document.getElementById("box1").innerHTML= '<textarea rows="4" onkeypress="CTRLC1(event)">Select some text and copy with CTRL-C.The <textarea> becomes hidden.</textarea>'; document.getElementById("testarea1").innerHTML= '<textarea rows="4" ">Paste text with CTRL-V</textarea>'; document.getElementById("box2").innerHTML= '<textarea rows="4" onkeypress="CTRLC2(event)">Select some text and copy with CTRL-C.The <textarea> becomes hidden.</textarea>'; document.getElementById("testarea2").innerHTML= '<textarea rows="4" ">Paste text with CTRL-V</textarea>'; </script> </body> </html> </code></pre> <p>and the JS-file test.js</p> <pre><code>function CTRLC1(event) { if (event.ctrlKey == true){ var x = event.which || event.keyCode; if (x==99 || x==67){ setTimeout(function(){document.getElementById("box1").style.visibility ="hidden";}, 1); } } } function CTRLC2(event) { if (event.ctrlKey == true){ var x = event.which || event.keyCode; if (x==99 || x==67){ document.getElementById("box2").style.visibility ="hidden"; } } } </code></pre></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/copy-paste" class="post-tag js-gps-track" title="show questions tagged 'copy-paste'" rel="tag">copy-paste</a> <a href="../../questions/tagged/hidden" class="post-tag js-gps-track" title="show questions tagged 'hidden'" rel="tag">hidden</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 06 '15 at 17:10">asked Aug 06 '15 at 17:10</time> <a href="../../users/5161483/francois-kalf" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5161483.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Francois Kalf" /> </a> <div class="s-user-card--info"> <a href="../../users/5161483/francois-kalf" class="s-user-card--link">Francois Kalf</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-31861827" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="31861827" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-51643429" class="comment js-comment " data-comment-id="51643429" data-comment-owner-id="3468982" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment51643429_31861827"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Both are not working with the code you provided http://jsfiddle.net/g5c0pgwj/1/</span> – <a href="../../users/3468982/loli" title="1,058 reputation" class="comment-user ">loli</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/31861827/javascript-ctrl-c-is-triggered-in-textarea#comment51643429_31861827"><span title="2015-08-06T17:22:18.410 License: CC BY-SA 3.0" class="relativetime-clean">Aug 06 '15 at 17:22</span></a></span> </div> </div> </li> <li id="comment-51643719" class="comment js-comment " data-comment-id="51643719" data-comment-owner-id="5161483" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment51643719_31861827"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">On my computer the first one works, the 2nd one does not work. I work with FireFox Developer....</span> – <a href="../../users/5161483/francois-kalf" title="1 reputation" class="comment-user owner">Francois Kalf</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/31861827/javascript-ctrl-c-is-triggered-in-textarea#comment51643719_31861827"><span title="2015-08-06T17:32:30.597 License: CC BY-SA 3.0" class="relativetime-clean">Aug 06 '15 at 17:32</span></a></span> </div> </div> </li> <li id="comment-51644316" class="comment js-comment " data-comment-id="51644316" data-comment-owner-id="3468982" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment51644316_31861827"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">ah, both don't work on chrome, but firefox you're right, the first one paste like expected</span> – <a href="../../users/3468982/loli" title="1,058 reputation" class="comment-user ">loli</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/31861827/javascript-ctrl-c-is-triggered-in-textarea#comment51644316_31861827"><span title="2015-08-06T17:52:44.280 License: CC BY-SA 3.0" class="relativetime-clean">Aug 06 '15 at 17:52</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="31862912"></a> <div id="answer-31862912" class="answer " data-answerid="31862912" data-ownerid="2652926" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="31862912"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You should be using <code>onkeydown</code> instead of <code>onkeypress</code>. </p> <blockquote> <p>In theory, the keydown and keyup events represent keys being pressed or released, while the keypress event represents a character being typed. The implementation of the theory is not same in all browsers. More info: <a href="../../questions/3396754/onkeypress-vs-onkeyup-and-onkeydown">onKeyPress Vs. onKeyUp and onKeyDown</a></p> </blockquote> <p>Here is the fiddle: <a class="external-link" href="http://jsfiddle.net/lucianmoldovan/g5c0pgwj/3/" rel="nofollow noreferrer">http://jsfiddle.net/lucianmoldovan/g5c0pgwj/3/</a></p> <p>Notice that on the second box, though the box gets hidden the text doesn't get copied. I imagine that the element is being hidden before the text gets copied to clipboard. Adding that <code>setTimeout</code> fixes this, even if you set it at <code>0</code> milliseconds.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 11:58">edited May 23 '17 at 11:58</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Aug 06 '15 at 18:11">answered Aug 06 '15 at 18:11</time> <a href="../../users/2652926/lucian" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2652926.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Lucian" /> </a> <div class="s-user-card--info"> <a href="../../users/2652926/lucian" class="s-user-card--link">Lucian</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">644</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-blingbronze" title="13 bronze badges">13</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>