I'd like to have a very simple webpage that by pressing a button would bring the soft-input keyboard on a mobile-device to show and have the user be able to press the keys from it.

I am well aware that having a text-input like field would do the job for me but I don't want to use that. I just want to toggle it from the button press. I don't want to have an input field, I'd get the keystrokes from a global window listener

Clicking the button the first time should show it and clicking it the second it time should hide it.

I am also aware that I can do that programatically if I build a native Android App using Kotlin/Java and same goes for an iOS app using the Obj-C/Swift counterparts but in this case I am dealing with a website so only web technologies would apply: HTML5, CSS and vanilla JavaScript

I also know that I can get a similar behavior by hacking an input field inside the 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
    }
}