title: Weird behaviour on Javascript clock
body: <p>I have came across this problem by answering another question. I have a working JavaScript clock with three lines containing the day, the current time, and the date. These lines should have the same width, so I used <a href="http://www.zachleat.com/web/bigtext-makes-text-big/" rel="nofollow noreferrer">BigText</a> plugin for that which is working fine except one thing.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
  tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  
  function GetClock(){
      var d=new Date(+new Date + 12096e5);
      var dx=d.toGMTString();
   dx=dx.substr(0,dx.length -3);
   d.setTime(Date.parse(dx))
   d.setSeconds(d.getSeconds() + 0);
      var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear(),nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;
  
          if(nhour==0){ap=" AM";nhour=12;}
     else if(nhour&lt;12){ap=" AM";}
     else if(nhour==12){ap=" PM";}
     else if(nhour&gt;12){ap=" PM";nhour-=12;}
  
   if(nyear&lt;1000) nyear+=1900;
   if(nmin&lt;=9) nmin="0"+nmin;
   if(nsec&lt;=9) nsec="0"+nsec;
  
      document.getElementById('1').innerHTML = "" + tday[nday].toUpperCase() + "";
      document.getElementById('1').setAttribute("contenteditable", "true");
      
      document.getElementById('2').innerHTML = "" + nhour + ":" + nmin + ":" + nsec + "" + ap + "";
      document.getElementById('2').setAttribute("contenteditable", "true");
      
      document.getElementById('3').innerHTML = "" + tmonth[nmonth].toUpperCase() + " " + ndate + ", " + nyear + "";
      document.getElementById('3').setAttribute("contenteditable", "true");
  }
  
  window.onload=function(){
      GetClock();
      setInterval(GetClock,1);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { font-family: Helvetica, Arial; }
  #bigtext {
      border: 1px solid rgba(255,0,0,0.5);
      color: #bcbcbc;
      padding: 40px 15px;
  }
  .bigtext-line1 {
      line-height: 45px;
      margin-top: -5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div style="width: 260px;" id="bigtext"&gt;
      &lt;div id="1" class="bigtext-line0"&gt;&lt;br/&gt;&lt;/div&gt;
      &lt;div id="2" class="bigtext-line1"&gt;&lt;br/&gt;&lt;/div&gt;
      &lt;div id="3" class="bigtext-line2"&gt;&lt;br/&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;select id="font" style="display: none;"&gt;
      &lt;option selected="selected" value=""&gt;&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.zachleat.com/bigtext/demo/js/modernizr-1.6.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.zachleat.com/bigtext/demo/js/jquery.ba-throttle-debounce.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.zachleat.com/bigtext/bigtext.js"&gt;&lt;/script&gt;
  &lt;script src="http://www.zachleat.com/bigtext/demo/bigtextWizard.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>There is a weird behaviour I couldn't figure out. You can see a padding on the right of the clock, which disappears, when you edit one of the lines on the clock. (<code>contenteditable = true</code>) However, I don't want users to edit the clock, so I want to use <code>contenteditable = false</code>, but if I use that, I cant get rid of the padding on the right.</p>
  
  <h2>What I've tried so far</h2>
  
  <p>is setting <code>document.getElementById('1').focus()</code> and after that simulating a keypress with jQuerys trigger event (when I try to edit one of the lines, and push <em>any</em> button, the padding disappears): </p>
  
  <pre><code>var press = jQuery.Event("keypress");
  press.ctrlKey = false;
  press.which = 20; //Caps Lock
  $("whatever").trigger(press);
  </code></pre>
  
  <p>but sadly I could'nt get it done. I was also searching for solutions for hours, probably a fresh look will help me.</p>
  
  <h2>What should it look like?</h2>
  
  <p><img src="https://i.stack.imgur.com/iq6DU.png" alt="enter image description here"></p>
  
  <p>Any suggestions would be appreciated.</p>