JSFiddle - React, Tailwind, and code Playground

by Mohammed Fellak

HTML

<!DOCTYPE html>
      <html>
       <head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

          <title>Test Page</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
        

</head>
<body>
    <div class="scrollformobile">
<p>Text</p>
  <input type="text" placeholder="text"/>
  <br/>
  <p>Text</p>
  <input type="text" class="text" placeholder="text"/>
  <br/>
  <p>Text</p>
  <input type="email" placeholder="text"/>
  <br/>
  <p>Text</p>
  <textarea placeholder="message"></textarea>
    <div class="ioskeyboard">
    </div>    
    </div>
</body>

CSS

input {
    margin-bottom: 10px;
}

.scrollformobile{
    height: 100vh;
        overflow: auto;

    background: red;
    display: block;
}

.ioskeyboard{
    position: relative;
    top: 0px;
    background-size: auto 100%;
    height: 250px;
    background-repeat: no-repeat;
    background-image: url('https://media.idownloadblog.com/wp-content/uploads/2019/04/Dark-Keyboard-Featured.jpg');
    z-index: 9999;
    display: none;
}

JavaScript

const password = document.querySelector('input[type="text"]');

password.addEventListener('focus', (event) => {
  document.querySelector('.ioskeyboard').style.display = 'block';    
});

password.addEventListener('blur', (event) => {
  event.target.style.background = '';    
});