title: How to create a 'glow' effect on a Textbox in Typescript?
body: <p>I have recently installed DevExtreme (from the Dev Express website) as I was looking for a way to create a single solution for multiple mobile devices (this software allows that). Having created a 'Basic' Typescript project, I feel quite the idiot for not being able to get it to work!</p>
  
  <p><strong>Below shows something similar to the desired effect:</strong></p>
  
  <p><img src="https://3.bp.blogspot.com/-dZq66xvgJmQ/T6L9CsKqaKI/AAAAAAAAAOg/l7_TRUuzJcY/s1600/TwitterStyleTextboxUsingCss3-0.png" alt="Text input, where the focused textbox &#39;glows&#39;"></p>
  
  <p>However, I am having some difficulty replicating this for some of the devices. For example, the windows Phone does this automatically, whereas the IOS device doesn't, and remains 'normal'. :(</p>
  
  <p>I followed the advise <a href="https://stackoverflow.com/a/22018433/3436942">here</a>, and copied everything, but <em>still</em> the textbox refuses to 'glow' for me!</p>
  
  <p><strong>My script:</strong> </p>
  
  <pre><code>&lt;script&gt;
      $(function () {
          $("#glow-trigger").on('click', function (e) {
              var glower = $('.glow');
              window.setInterval(function () {
                  glower.toggleClass('active');
              }, 1000);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>My css for this:</strong></p>
  
  <pre><code>.glow {
      background-color: #ccc;
      border: 1px solid transparent;    
      -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
         -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
              transition: border 0.1s linear, box-shadow 0.1s linear;
  }
  
  .glow.active {
      border-color: blue;
      -webkit-box-shadow: 0 0 5px blue;
         -moz-box-shadow: 0 0 5px blue;
              box-shadow: 0 0 5px blue;
  }
  </code></pre>
  
  <p><strong>The 'practise' HTML:</strong></p>
  
  <pre><code> &lt;div class="home-view" data-options="dxContent : { targetPlaceholder: 'content' } "&gt;
          &lt;br /&gt;
          &lt;p class="hovertest"&gt;
              &lt;button id="myButton" onclick="sayHello()"&gt; this is a button&lt;/button&gt;
          &lt;/p&gt;
          &lt;br /&gt;
          &lt;h1&gt;this is a heading&lt;/h1&gt;
          &lt;br /&gt;
         &lt;h2&gt;another heading&lt;/h2&gt;
          &lt;br /&gt;
          &lt;a id="glow-trigger" href="#tomytextbox"&gt;Click Me&lt;/a&gt;
          &lt;p&gt;this is normal text&lt;/p&gt;&lt;div data-bind="dxTextBox: {}"&gt;&lt;/div&gt;
  
          &lt;div id="tomytextbox"&gt;
              &lt;input class="glow" type="text" /&gt;
          &lt;/div&gt;
          &lt;div data-bind="dxMultiView: { height: 300, items: [{ text: 'Drag me to left' }, { text: 'drag me to right' }] }"&gt;&lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>If I am doing something stupidly wrong, please tell me!</p>
  
  <p>Thanks :)</p>