JSFiddle - React, Tailwind, and code Playground

by zauker

HTML

<div class="dx-fieldset">
                    <div class="dx-field">
                        <div class="dx-field-label">Phone</div>
                        <div class="dx-field-value dx-texteditor dx-texteditor-empty dx-widget dx-state-hover-enabled dx-textbox" data-bind="dxTextBox:{ mode: 'tel', value: phone }"><div class="dx-texteditor-border"><input class="dx-texteditor-input" type="tel" placeholder=""></div></div><span class="validationMessage" style="display: none;"></span>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Field</div>
                        <div class="dx-field-value dx-texteditor dx-texteditor-empty dx-widget dx-state-hover-enabled dx-textbox" data-bind="dxTextBox:{ mode: 'tel', value: field}"><div class="dx-texteditor-border"><input class="dx-texteditor-input" type="tel" placeholder=""></div></div><span class="validationMessage" style="display: none;"></span>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Field</div>
                        <div class="dx-field-value dx-texteditor dx-texteditor-empty dx-widget dx-state-hover-enabled dx-textbox" data-bind="dxTextBox:{ mode: 'tel', value: field }"><div class="dx-texteditor-border"><input class="dx-texteditor-input" type="tel" placeholder=""></div></div><span class="validationMessage" style="display: none;"></span>
                    </div>
                    <div class="dx-field">
                        <div class="dx-field-label">Field</div>
                        <div class="dx-field-value dx-texteditor dx-texteditor-empty dx-widget dx-state-hover-enabled dx-textbox" data-bind="dxTextBox:{ mode: 'tel', value: field }"><div class="dx-texteditor-border"><input class="dx-texteditor-input" type="tel" placeholder=""></div></div><span class="validationMessage" style="display: none;"></span>
                    </div>
                    <div...

CSS

.onFocus {
    background: yellow;
}

.virtual-keyboard {
    margin-bottom: 200px;
}

JavaScript

jQuery(document).ready(function($){
    var blurtime;
    $(document).on("focus", "input", function (e) {
        console.log("focus on");
        clearTimeout(blurtime);
        $( this ).addClass('onFocus');
        $('body').addClass('virtual-keyboard');
        $('html, body').animate({
            scrollTop: $( this ).offset().top
        }, 1000);
    }).on("blur", "input", function (e) {
        $( this ).removeClass('onFocus');
        blurtime = setTimeout(function(){
            $('body').removeClass('virtual-keyboard');
        },200);
        console.log("blur on");
    });

});