Me gustaría tener una página web muy simple que al presionar un botón muestre el teclado de entrada suave en un dispositivo móvil y que el usuario pueda presionar las teclas desde allí.

Soy muy consciente de que tener un campo de entrada de texto haría el trabajo por mí, pero no quiero usarlo. Solo quiero alternarlo desde presionar el botón. No quiero tener un campo de entrada, obtendría las pulsaciones de teclas de un oyente de ventana global

Hacer clic en el botón la primera vez debería mostrarlo y hacer clic en él la segunda vez debería ocultarlo.

También soy consciente de que puedo hacerlo programáticamente si construyo una aplicación de Android nativa usando Kotlin/Java y lo mismo ocurre con una aplicación de iOS usando las contrapartes de Obj-C/Swift, pero en este caso estoy tratando con un sitio web, así que solo tecnologías web. aplicaría: HTML5, CSS y JavaScript vainilla

También sé que puedo obtener un comportamiento similar pirateando un campo de entrada dentro del DOM.

 /*the element is positioned absolutely so it doesnt affect the placement of other elements in the DOM*/ .kbd-hidden { position:absolute; top: 0; left: 0; opacity: 0; }

 <button onclick="toggle(this)">Click me!</button>

 let fakeInput = null let showingKeyboard=false function makeKeyboard() { const input = document.createElement('input', { 'type': 'text' }) input.addEventListener('input', () => alert('Inputting!')) document.body.appendChild(input) input.focus() input.classList.add('kbd-hidden') return input } function destroyKeyboard(el) { el.remove() } function toggle(event) { const btn = event.target showingKeyboard = !showingKeyboard if(showingKeyboard) { fakeInput = makeKeyboard() } else { destroyKeyboard(fakeInput) fakeInput = null } }