Javascript отличий Desktop и Mobile

Question

У меня есть эта проблема: есть два поведения, которые работают по-разному в мобильном браузере по сравнению с настольным браузером.

Во-первых: в настольном браузере невозможно ввести любую букву в редактируемую ячейку из-за сценария ниже. Тем не менее, в мобильном телефоне я могу установить любую букву, и когда нажимаю Enter, в ячейке отображается NaN.

Секунда: Как видно из кода HTML, происходит событие «onClick», в котором выбирается значение. редактируемой ячейки во время редактирования, так что пользователь может перезаписать ее, не нажимая Canc / Backspace. В мобильном телефоне он также выбирает значение, проблема в том, что, когда коснитесь ячейки и ничего не редактируете, а просто нажмите Enter еще раз, он показывает NaN, а не самое старое неотредактированное значение.

Редактируемая ячейка:

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

Сценарий:

    $('td[id="Preleva"]').keypress(function(e) {
        if (isNaN(String.fromCharCode(e.which))) e.preventDefault();
    });

Answer 1

document.execCommand устарела и в некоторых браузерах не могла работать. Если это вход, вы можете сделать что-то вроде этого (проверьте this для получения дополнительной информации):

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

Более того, e.which также устарел и в некоторых браузерах также не может работать.

В здесь , у вас есть хороший пост об альтернативах этому событию.

Более того, вы можете найти хорошую альтернативу document.execCommand('selectAll',false,null) в здесь

Answer 2

Решено путем помещения тега внутрь и последующего управления всем на месте, теперь оно отлично работает на любом устройстве.