smagch/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iOS focus Test</title>
    <style>
      .modal {
        transition: opacity 0.3s;
      }
      .modal.hidden {
        visibility: hidden;
        opacity: 0;
      }
      .button {
        cursor: pointer;
        border: 1px solid gray;
        border-radius: tomato;
      }
    </style>
  </head>
  <body>
    <div class="modal hidden">
      <input type='text' />
    </div>
    <button>button</button>
    <script>
      const input = document.querySelector('input');
      const button = document.querySelector('button');
      const modal = document.querySelector('.modal');

      button.addEventListener('click', () => {
        modal.classList.remove('hidden');
        input.focus();
      });

      input.addEventListener('blur', () => {
        modal.classList.add('hidden');
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>iOS focus Test</title>
	<style>
	.modal {
	transition: opacity 0.3s;
	}
	.modal.hidden {
	visibility: hidden;
	opacity: 0;
	}
	.button {
	cursor: pointer;
	border: 1px solid gray;
	border-radius: tomato;
	}
	</style>
	</head>
	<body>
	<div class="modal hidden">
	<input type='text' />
	</div>
	<button>button</button>
	<script>
	const input = document.querySelector('input');
	const button = document.querySelector('button');
	const modal = document.querySelector('.modal');

	button.addEventListener('click', () => {
	modal.classList.remove('hidden');
	input.focus();
	});

	input.addEventListener('blur', () => {
	modal.classList.add('hidden');
	});
	</script>
	</body>
	</html>