html长按选择文本框,解决（html标签）span、div标签模拟按钮点击时标签内部文本会被选中（类似于鼠标长按选择的情况）...

一、前言

出于需要&＃xff0c;我没有直接用button标签和element的el-button标签&＃xff0c;我用span模拟了一个标签&＃xff0c;并且给与了一个点击事件&＃xff0c;但是较快的点击这个模拟按钮&＃xff0c;会出现自动选中其中的文本的现象&＃xff0c;类似于鼠标长按选择文本的那种情况。造成了不好的体验&＃xff0c;我提供一种解决方案。

二、demo展示(直接上图)

未处理之前(点击速度稍微较快就会选中)

处理之后(正常了)

哈哈&＃xff0c;其实这里应该使用Gif的&＃xff0c;但是&＃xff0c;领会精神就好&＃xff0c;嘻嘻。

三、解决方案

出现选中情况时候的代码(未解决之前)

下一节

解决的代码

下一节

代码解析

大家能看到&＃xff0c;这里其实就添加了三个属性

style&＃61;"-moz-user-select:none;"(参考于&＃xff1a;https://www.cnblogs.com/jiangtuzi/archive/2013/04/23/3038245.html)&＃xff1a;该属性可以说有三个属性值:

1、 none&＃xff1a;在FF2.0测试,用none,子元素所有的文字都不能选择&＃xff0c;包括input输入框中的文字也不能选择。

2、 -moz-all&＃xff1a;子元素所有的文字都可以被选择&＃xff0c;但是input输入框中的文字不可以被选择。

3、 -moz-none&＃xff1a;子元素所有的文字都不能选择&＃xff0c;但是input输入框中的文字除外(已经过测试)。

unselectable&＃61;“on”(参考于&＃xff1a;https://www.cnblogs.com/liuyanxia/p/5619391.html)&＃xff1a;在IE浏览器中&＃xff0c;当input获得焦点时&＃xff0c;点击有unselectable&＃61;"on"属性的标签时&＃xff0c;不会触发onblur事件。

加上该属性的元素不能被选中

onselectstart&＃61;“return false;”(参考于&＃xff1a;https://www.cnblogs.com/phermis/articles/6061348.html)&＃xff1a;禁止选择

觉得有帮助就动动小手点个赞吧&＃xff0c;欢迎各位小伙伴一起讨论、学习&＃xff0c;有疑问就留言吧&＃xff0c;哈哈。同时也欢迎指正。