CODEWITHSUNDEEP
javascripthtmlmobile
staff614
staff614

Reputation: 91

Javascript differences Desktop & Mobile

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();
    });

Upvotes: 0

Views: 401

Answers (2)

staff614
staff614

Reputation: 91

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

Upvotes: 0

Ricardo Rocha
Ricardo Rocha

Reputation: 16216

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

Upvotes: 2

Related Questions