iPad is not writing text in the <input>

Question

I'm having trouble with the <input> field when running my application on iPad.

On the desktop you click on the text box, type the text in and click on a button to validate the input. On iPad however it opens the keyboard panel when you click on it, but the text doesn't show in the text box when you type.
To make things even weirder, I have a <textarea> in another section of the application and it works perfectly. The difference is one is sitting on top of the application and the other is in an imported html.

The structure of the application is like this:

On the top I have the main HTML5 page, which imports a html page that contains 3 divs. Each div in turn imports other html pages. And those pages have a different content each, including the problematic input field. Something like this:

Main.html
    -> container.html (imported via iframe)
        -> div1 (imports page n-1 via load(url))
        -> div2 (imports page n via load(url))
        -> div3 (imports page n+1 via load(url))

pageN.html
    -> contains the <input> field

The code for the <textarea> sitting on the main html is like this:

<form id="formNotes">
    <textarea id="mainTextbox" type="text" onKeyUp="RefreshNote()" onChange="RefreshNote()"></textarea>
</form>

And the code for the <input> field inside the imported html page is like this:

input{
    -webkit-user-select: auto;
}

<form id="formInput">
    <input id="text1" type="text" ontouchstart="OpenKeyboard(this)" onKeyDown="WriteText(this)" onKeyUp="WriteText(this)" onChange="WriteText(this)"></input>
</form>

One thing I've learned about using events on imported HTMLs though was you need to use ontouchstart and others to call the click functions. But in this case I can get the iPad to open the keyboard, so I don't know why it's not recognizing the click on the keyboard keys, or why it's not sending the value into the text box.

[EDIT:] I found out the reason why I'm not getting any text written is because the iPad thinks the <input> field doesn't exist (it shows up blank in the alert, instead of [object Object] or [object HTMLInputElement]). I have no idea why though.

[EDIT 2:] I tried to use getElementsByTagName and getElementsByClassName instead of getElementById. With that it seems to recognize the <input>, but I still can't reach the value.

Answer 1

This is not an actual solution to the problem, but a rather "crude" workaround.

For some reason the keyboard in the iPad isn't sending the values into the <input>, although it's firing the key events. So I was forced to capture the values, write them down and then send the full string into the text box. In other words, do the same work the keyboard should do automatically to begin with!

// Text container
temp = "";

document.addEventListener('keydown', function(event) {

    // Checks if the key isn't the delete
    if(event.keyCode != 8){

       // Converts and writes the pressed key
       temp += String.fromCharCode(event.keyCode);
    }
    else{
       // Deletes the last character
       temp = temp.slice(0, temp.length-1);
    }
}

document.addEventListener('keyup', function(event) {

    // Writes the text in the text box
    document.getElementById("text1").value = temp;
}

This solution only works for alphanumeric characters however. If I want to use special characters I need to add a switch case for each individual key code (charCode worked on iPad, but it behaved weirdly on desktop browsers).