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

Where should that go? I guess a "click" from a mobile doesn't count as a "keypress" and trigger my function? — Peter Wirdemo, Sep 11 '17 at 14:02
I think this may be your answer https://stackoverflow.com/questions/5797539/jquery-select-all-text-from-a-textarea/5797700#answer-5797700 — GavinBrelstaff, Sep 11 '17 at 14:06
Tried it now, no change .. Cursor ends up at last position on first row no matter where I click inside the TEXTAREA and I can't type anything into it. — Peter Wirdemo, Sep 11 '17 at 14:12
That created some flippy effect to desktop version but had no effect when opened from mobile. (I added a link to my example in the question, its the top TEXTAREA) — Peter Wirdemo, Sep 11 '17 at 14:26

score 2 · Answer 1 · answered Sep 17 '17 at 18:37

2

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.

answered Sep 17 '17 at 18:37

user8335505

74
4

word-break:break-word didn't work and I have the textarea prefilled with spaces for a reason. It works without it being prefilled with 400 spaces, but that is not the solution I am looking for. I need to get it to work placing the cursor "inside" a line full of empty spaces. – Peter Wirdemo Sep 19 '17 at 11:19
use it along with other properties on textarea as: textarea{ white-space: pre-wrap; word-wrap: break-word; word-break: break-all;} – user8335505 Sep 19 '17 at 20:52

score 2 · Answer 2 · answered Sep 21 '17 at 01:17

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.

answered Sep 21 '17 at 01:17

Gibolt

42,564
15
187
127

Not sure if you suggest using your function in addition to mine or instead of. I tried both combinations without success: http://artificial.se/ta2.html still cannot place the cursor on any other row than the first using IPhone/Safari. I am currently trying to create a workaround using 5 separate one-line textareas where one can "jump" between them using Arrow key UP/DOWN from client with keyboard. – Peter Wirdemo Sep 21 '17 at 10:58

score 1 · Answer 3 · answered Sep 19 '17 at 05:32

1

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

answered Sep 19 '17 at 05:32

newbie

334
2
8

score 0 · Answer 4 · answered Sep 22 '17 at 08:31

0

I suggest that if you want spaces appended you can get the remaining spaces appended in form submit, working with js in this can be avoided and will be better after user has filled the input field.

answered Sep 22 '17 at 08:31

JosephC

166
1
7

You are right about that but it's actually the user interface - being able to place the cursor anywhere and add content there (similar to a painting application) - that I am trying to create/mimic. – Peter Wirdemo Sep 22 '17 at 13:18

Cannot place cursor on whitespace-filled TEXTAREA from mobile

4 Answers4