移动端web禁用长按选中功能

原创于 2018-03-23 11:17:35 发布 · 9.1k 阅读

3 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#移动开发

移动开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在移动端页面上禁用长按选中文本的功能，并提供了三种方法及相应的解决方案来避免影响输入框聚焦和长按语音发送等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端页面中，长按可选中文本；但有时候为了更好地用户体验需禁用此功能。

方法一：

* {
   -webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;	
}

注：此方法会带来以下问题--

问题一：这样会让iOS的input框无法聚焦

解决方案：
input{-webkit-user-select:auto;}
问题二：如果需要长按发送语音，禁用长按之后，无法长按发送语音

解决方案：
<div class="voice-speak" ontouchstart="return false;" style="display: none" id="startRecord"><span>按住说话</span></div>

方法二：

div { pointer-events: none;}

方法三：

window.ontouchstart = function(e) { e.preventDefault(); };