Cannot place cursor on whitespace-filled TEXTAREA from mobile

Question

I have a TEXTAREA control (ID="taCode"), maxlength=400, that is pre-filled with 400 whitespaces.

I use Javascript to force insert-mode (replace) when entering text into textarea:

var input = document.getElementById("taCode");
input.addEventListener('keypress', function(){
    var s = this.selectionStart;
    var e = this.selectionEnd;
    this.value = this.value.substr(0, s) + this.value.substr(e + 1);

    if (this.value.length < 399)
    {
        this.value += new Array(399-this.value.length).join(' ');
    }

    this.selectionEnd = this.selectionStart = s;
}, false);

HTML:

<TEXTAREA ID="taCode" COLS="80" ROWS="5" MAXLENGTH="400" style="overflow:hidden">                                                                                                                                                                                                                                                                                                                                                                                                                </TEXTAREA>

Everything works fine using a desktop and mouse, but trying to place the cursor inside the TEXTAREA using a mobile (Iphone) fails (EDIT: Placing cursor on first row works sometimes) and nothing can be typed into the field, except for on the first line. Any idea of how to get it to work for mobiles for all lines?

Test: http://artificial.se/ta.html

Answer 1

Your first line in iPhone is completely populated because of spaces.So, when you put your cursor there and try to type, it moves on to next line so as to accommodate all the spaces which are prepopulated by you.If you clear those spaces and try to type on iPhone or reduce the number of spaces and try it.It would definitely work. If not then add word-break:break-word property to your textarea element to make it work.

Answer 2

Try something like:

area.addEventListener("input", function(e) {
    const caretIndex = area.selectionStart;
    const content = area.value;
    const newContent = str.slice(0, caretIndex) + e.key + str.slice(4);
    area.value = newContent;
});

This will likely need a little work still. Some combination of input/change/keydown should work. I'd also suggest making the number of spaces one less than you need, and later fill the end with an extra space when you are using the entered value.

Answer 3

may be you can use the keydown event for this (sorry i just want to comment but my reputation is low)