RBN Focus

by karlovac

HTML

<div class="fc-main-panel">
  blah
  </div>

  <div class="fc-secondary-panel">
  </div>

CSS

.fc-main-panel {
    height: 216px;
    background-color: green;
    position: relative;
    display: block;
  }

  .fc-secondary-panel {
    background-color: #ff0000;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: 89px
  }

  .fc-secondary-panel input {
    display: block;
    margin: auto;
    margin-top: 0px;
    font-size: 24px;
  }

JavaScript

const logEvent = (e) => {
      console.log('['+e.type+'] event');
    };

    for (let i=0; i<2; i++) {
      const el = document.createElement('input');

      el.addEventListener('mousedown', e => {
        logEvent(e);
      });
      el.addEventListener('focus', e => {
        logEvent(e);
        e.preventDefault();
        setTimeout(() => {
          console.log('timeout has run');
          // window.scrollTo(0,0);    
        }, 100);
      });
      el.value = 'input number ' + i;
      const parent = document.querySelector('.fc-secondary-panel');
      parent.append(el);
    }