0

I have this problem: there are two behaviors which works differently in mobile browser compared to Desktop browser.

First: In Desktop browser it is impossible to input any letter in the editable cell, because of the script below. However, in mobile I can set any letter and when press Enter it shows NaN in the cell.

Second: As you can see in the HTML code there is the event 'onClick', which select the value of the editable cell during the edit, so that the user can overwrite it without pressing Canc/Backspace. In mobile it selects the value too, problem it is that when tap the cell and don't edit anything but just press Enter again, it shows NaN and not the oldest not edited value.

Editable cell:

<td width="14%" class="text-center" id="Preleva" contenteditable="true" onclick="document.execCommand('selectAll',false,null)"> @record.Preleva</td>

Script:

    $('td[id="Preleva"]').keypress(function(e) {
        if (isNaN(String.fromCharCode(e.which))) e.preventDefault();
    });
staff614
  • 71
  • 8
  • 1
    Is it because [`Event#which`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which) is deprecated and is probably not supported on both? – VLAZ Jan 23 '20 at 13:53
  • @VLAZ it is supported on desktop chrome. Anyway i tried other options than event#which, but in mobile it still allows me to insert letters. – staff614 Jan 23 '20 at 14:28

2 Answers2

2

The document.execCommand is deprecated and in some browsers could not work. If it is an input, you could do something like this (check this for more information):

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Moreover, the e.which is also deprecated and in some browsers could not work as well.

In here, you have a nice post about alternatives to the event which.

Moreover, you can find a nice alternative to document.execCommand('selectAll',false,null) in here

Ricardo Rocha
  • 14,612
  • 20
  • 74
  • 130
  • Tested your code, however it doesn't work, in the console it gives the error: "Cannot read property Length of undefined". Problem might be that when i click on TD it has to convert the td on editable content, this is why there is the attribute contenteditable=true. Also, tested alternatives of e.which, like the keycode or keypress, on desktop chrome all of them works correctly, except on mobile browsers. – staff614 Jan 23 '20 at 14:31
  • @staff614 if you run the snippet, it works. Which browser you are using? – Ricardo Rocha Jan 23 '20 at 14:33
  • Chrome in desktop and also in android. But i think the problem might be that I don't use the tag but it is a ? – staff614 Jan 23 '20 at 14:36
  • The only way that I can see for this to work is to use ``, showing/hidding each time the users click on the content. You can try playing with readonly input properties and chang the input layout to hide the border – Ricardo Rocha Jan 23 '20 at 14:54
  • @staff614 Maybe I'm wrong because i found out an alternative to `document.execCommnad`. Check out the edits that I made on my answer – Ricardo Rocha Jan 23 '20 at 15:05
0

Solved by putting an tag inside and then managing everything on the instead the , now it works perfectly in any device.

staff614
  • 71
  • 8