Javascript 差异桌面和移动答案

【问题标题】：Javascript differences Desktop & MobileJavascript 差异桌面和移动
【发布时间】：2020-01-23 13:50:19
【问题描述】：

我有这个问题：与桌面浏览器相比，移动浏览器中有两种不同的行为。

首先：在桌面浏览器中，无法在可编辑单元格中输入任何字母，因为下面的脚本。但是，在移动设备中，我可以设置任何字母，当按 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();
    });

【问题讨论】：

是不是因为Event#which 已被弃用并且可能两者都不支持？
@VLAZ 它在桌面 chrome 上受支持。无论如何，我尝试了 event#which 以外的其他选项，但在移动设备中它仍然允许我插入字母。

标签： javascript html mobile

【解决方案1】：

document.execCommand 已弃用，在某些浏览器中无法使用。如果是输入，您可以这样做（查看this 了解更多信息）：

&lt;input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" /&gt;

此外，e.which 也已被弃用，在某些浏览器中也无法正常工作。

在here 中，您有一篇关于事件替代方案的好帖子。

此外，您可以在here 中找到document.execCommand('selectAll',false,null) 的不错替代品

【讨论】：

测试了您的代码，但是它不起作用，在控制台中它给出了错误：“无法读取未定义的属性长度”。问题可能是当我单击 TD 时，它必须将 td 转换为可编辑内容，这就是为什么存在属性 contenteditable=true 的原因。此外，经过测试的 e.which 替代品，如 keycode 或 keypress，在桌面 chrome 上都可以正常工作，但在移动浏览器上除外。
@staff614 如果您运行 sn-p，它可以工作。您使用的是哪种浏览器？
Chrome 在桌面和安卓中。但我认为问题可能是我不使用标签，但它是一个 ?
我能看到的唯一方法是使用<input>，每次用户点击内容时显示/隐藏。您可以尝试使用只读输入属性并更改输入布局以隐藏边框
@staff614 也许我错了，因为我找到了document.execCommnad 的替代方案。查看我对答案所做的修改