如何在 javascript 中为桌面和移动设备创建不同的点击行为?

     2023-03-14     267

关键词:

【中文标题】如何在 javascript 中为桌面和移动设备创建不同的点击行为?【英文标题】:How to create different onclick behavior for desktop and mobile in javascript? 【发布时间】:2012-07-21 08:57:10 【问题描述】:

我正在开发生成一段格式化文本的简单表单(你可以看看here)。想法是简化创建文本的选择。对于桌面浏览器,在 div 上使用 onсlick 处理程序的代码效果很好:

if (document.selection) 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById('template_text'));
    range.select();

else if (window.getSelection)         
    var range = document.createRange();
    range.selectNode(document.getElementById('template_text'));
    window.getSelection().addRange(range);
   

在移动浏览器(Android 浏览器和 iOS 版 Safari)中,此代码仅高亮 div 片刻,没有其他内容。我不想创建单独的移动版本,因为这只是表单的问题。

能否在不影响桌面当前功能的情况下以某种方式简化移动浏览器的文本选择?

谢谢。

【问题讨论】:

【参考方案1】:

根据this 线程的回答,您可以转到http://detectmobilebrowsers.com/ 并下载脚本,该脚本将为您提供检测访问者是否使用移动浏览器或桌面浏览器的工具。然后,您只需使用简单的 if 分支您的代码,并在此特定位置分别安排选择文本的移动和桌面行为

【讨论】:

如何在 Javascript 中为 iOS 和 Android 创建可靠的指南针?

】如何在Javascript中为iOS和Android创建可靠的指南针?【英文标题】:HowdoIcreateareliablecompassforiOSandAndroidinJavascript?【发布时间】:2019-01-0615:37:35【问题描述】:我正在尝试在Javascript/JQuery中创建一个可靠的指南针(使用deviceorientation... 查看详情

在移动浏览器中测试 Javascript

】在移动浏览器中测试Javascript【英文标题】:TestJavascriptinmobilebrowser【发布时间】:2017-01-2007:41:01【问题描述】:我编写了一个纯JavaScript代码,可以在不同的桌面和移动设备上运行。对于桌面,我可以打开浏览器控制台并测试... 查看详情

是否可以在 AngularJS、JavaScript 和 JQuery 中跟踪移动/桌面模型?

】是否可以在AngularJS、JavaScript和JQuery中跟踪移动/桌面模型?【英文标题】:IsitpossibletotrackMobile/DesktopmodelinAngularJS,JavaScriptandJQuery?【发布时间】:2020-10-2404:40:17【问题描述】:我需要在JavaScript、JQuery和AngularJS中跟踪用户的移动/... 查看详情

javascript重定向不适用于移动设备

我有一个Javascript代码(下面),通过在新选项卡中打开,将用户重定向到我的网站的主页。我遇到的问题是它无法在移动设备上运行。functionredirect(url){varwin=window.open(url);win.focus();}当我单击应该打开新选项卡的按钮时,没有任何... 查看详情

如何在 C# 桌面应用程序和移动(android)设备之间通过本地网络进行通信? [关闭]

】如何在C#桌面应用程序和移动(android)设备之间通过本地网络进行通信?[关闭]【英文标题】:HowtocommunicateoverlocalnetworkbetweenC#desktopapplicationandmobile(android)device?[closed]【发布时间】:2011-08-0622:57:03【问题描述】:我有一个C#(.net3... 查看详情

Javascript:在移动设备上调试

】Javascript:在移动设备上调试【英文标题】:Javascript:debuggingonmobile【发布时间】:2015-07-1122:39:36【问题描述】:我使用requirejs、angularjs和ui-grid创建了一个简单的应用程序。它所做的只是从excel文件中获取一些数据并将其显示在... 查看详情

如何在不丢失 css 的情况下将模板从桌面发送到移动设备

】如何在不丢失css的情况下将模板从桌面发送到移动设备【英文标题】:Howtosendatemplatefromdesktoptomobiledevicewithoutloosingcss【发布时间】:2016-05-0916:18:25【问题描述】:我正在从台式机/笔记本电脑向移动设备发送一封电子邮件,但... 查看详情

在移动设备和桌面设备之间切换悬停在下拉菜单上

】在移动设备和桌面设备之间切换悬停在下拉菜单上【英文标题】:Togglinghoverondropdownbetweenmobileanddesktop【发布时间】:2016-10-2306:56:06【问题描述】:我有一些简单的JS,可以根据浏览器的宽度删除或​​添加html。如果它在移动... 查看详情

如何防止桌面网站上的图像在移动设备上加载?

】如何防止桌面网站上的图像在移动设备上加载?【英文标题】:HowcanIpreventimagesthatareonmydesktopsitefromloadingonmobile?【发布时间】:2020-03-2403:42:33【问题描述】:所以我目前有一个网站,根据屏幕尺寸加载两种不同的版本:一种用... 查看详情

适用于桌面和移动设备的 jQuery Mobile

...我可以在桌面和移动端的jQueryMobile上开发单一界面吗?您如何看待具有此类界面的桌面用户Web应用程序?我的意思是可用性。所以支持的PC浏览器:Chrome10+火狐3.6+歌剧11IE7+【问题讨论 查看详情

Nuxt / Vue JS 页面在桌面和连接 WiFi 的移动设备上渲染良好,但在 4G/5G 设备上却不行。知道如何解决这个问题吗?

...WiFi的移动设备上渲染良好,但在4G/5G设备上却不行。知道如何解决这个问题吗?【英文标题】:Nuxt/VueJSPageRenderingFineonDesktop&WiFi-connectedMobileDevices,butnotondeviceson4G/5G.Anyideahowtofixthis?【发布时间】:2021-12-0706:16:49【问题描述】:... 查看详情

javascript:检查用户代理是不是在桌面设备上

】javascript:检查用户代理是不是在桌面设备上【英文标题】:javascript:Checkingifuseragentisondesktopdevicejavascript:检查用户代理是否在桌面设备上【发布时间】:2014-12-2410:03:10【问题描述】:我浏览了整个网络,但仍然找不到一个相... 查看详情

如何在移动设备上模拟 .click()

】如何在移动设备上模拟.click()【英文标题】:Howtosimulate.click()onmobile【发布时间】:2020-07-1023:50:44【问题描述】:我需要单击一个div来执行操作。我成功地做了桌面版,但是当我去移动时,点击操作不起作用。我尝试了几种在St... 查看详情

为移动设备、低分辨率桌面和高分辨率桌面编写媒体查询 [重复]

...差异,然后检测高分辨率桌面和低分辨率桌面。我有一些JavaScript用于加载不同的CSS 查看详情

如何使用 Javascript 在移动 Safari 和所有其他浏览器上录制音频?

】如何使用Javascript在移动Safari和所有其他浏览器上录制音频?【英文标题】:HowtorecordaudioatmobileSafariandallotherbrowserswithJavascript?【发布时间】:2019-05-1908:52:39【问题描述】:我只想在所有浏览器、桌面浏览器以及移动(iOS/Android)浏... 查看详情

javascript切换桌面/移动设备的悬停/触摸事件(代码片段)

查看详情

如何默认导航抽屉在移动设备上关闭并在桌面上打开?

】如何默认导航抽屉在移动设备上关闭并在桌面上打开?【英文标题】:Howtodefaultnavigationdrawertoclosedonmobileandopenondesktop?【发布时间】:2021-04-0915:28:37【问题描述】:我正在使用vuejs的quasar框架。我有一个滑动导航抽屉。我正在努... 查看详情

Javascript 在移动设备上不起作用,但在桌面上适用于四个 otp 框的选项卡到下一个字段

】Javascript在移动设备上不起作用,但在桌面上适用于四个otp框的选项卡到下一个字段【英文标题】:Javascriptnotworkingonmobilebutworksondesktopfortabtonextfieldforfourotpbox【发布时间】:2019-09-2406:28:57【问题描述】:letelement=$event.srcElement.nex... 查看详情