禁止input框选中文字后,可以拖动

最新推荐文章于 2024-12-29 08:05:30 发布
最新推荐文章于 2024-12-29 08:05:30 发布
阅读量430 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51305414/article/details/131300257
版权
文章讲述了如何获取input元素的DOM节点，并通过添加ondragstart事件并返回false来阻止input元素的拖放行为。示例代码展示了这一具体操作方法。

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

 

 

 

1.获取input的dom节点

2.给dom节点添加ondragstart事件,然后再return false

eg:假设one是input的dom节点,代码如

    one.ondragstart = () => {

      return false;

     };

弹窗拖拽+水平方向伸缩（弹框无法选中文字）
weixin_44274094的博客
09-07 722
【代码】弹窗拖拽+水平方向伸缩。
el-input,禁止粘贴, 禁止拖拽输入
J_mine的博客
08-13 2922
原理分析 流览器的 事件传递机制是 (先捕获,后冒泡)的过程 , 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可 代码如下 <el-input v-model="input" placeholder="请输入内容" @paste.native.capture.prevent="inputPress"> </el-input> methods...
input 禁止粘贴 禁止拖拽
Run the ant
01-05 3680
禁止粘贴： 禁止拖拽：
(css必看)禁止用户拖动，禁止选中复制，禁止输入框输入
大雾起了清晨
05-12 1570
​ 目录 特殊的css，下面每一个都必须了解 1.user-select属性可以设置是否允许用户选择页面中的图文内容； 2.user-drag属性可以设置是否允许页面元素拖拽。 3.user-modify属性可以设置是否允许输入框输入内容 特殊的css，下面每一个都必须了解 1.user-select属性可以设置是否允许用户选择页面中的图文内容； user-select不可被用户选中__揽的博客-优快云博客 user-select: none; 2.user-drag属性可以设置是否允
禁止选择文字
dzzx010的专栏
06-11 501
从网站收集的一些禁止选择文字方法1.单个控件：onselectstart="return false"; //禁止选择文字2.全局禁止选择文字<body onSelectStart=return(event.srcElement.type=="text")>3.全局禁止选择文字但输入框可以选择<body onSelectStart="return event.srcElement.tagName==
通过JavaScript正则表达式限制input输入框的输入内容
tianxianghuiwei的博客
09-18 2140
a-input onchange="if(/\D/.test(this.value)){alert('只能输入数字');9.限制input输入框除了英文的标点符号以外，其他的都可以。
鼠标移动div时禁止选中div中的文字的方法
09-25
在网页开发过程中，有时我们需要创建可拖动的div元素，但在这个过程中，用户可能会无意间选中div内的文字，这不仅影响用户体验，也可能对div的移动造成干扰。为了解决这个问题，我们可以采用CSS和JavaScript的方式来...
vue实现页面内容禁止选中功能,仅输入框和文本域可选
12-13
上网上翻了翻，共找到两种方式 ... *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none;...input{ -webkit-user-select:au
利用CSS实现禁止双击选择页面内容的实例展示
09-25
描述中提到，通常情况下，双击会触发文本选择，这可能会导致在滚动图片时意外选中文字。为了解决这个问题，我们可以使用CSS的某些特性来禁用这个行为。在IE和Chrome浏览器中，可以通过在元素上添加`onselectstart=...
input disabled 禁止选中
weixin_30246221的博客
06-29 614
<input type=checkbox disabled /> 转载于:https://www.cnblogs.com/freddyhuang/p/5628589.html
input 输入框屏蔽鼠标选中操作 复制 剪切等
tenggeer0789的博客
01-15 3121
<input type="text" name="a1" draggable="true" value="aaa"> 给input 框添加 draggable="true"属性即可，是可拖动属性和选中属性冲突所以导致鼠标选中失效，达到目的 ...
让input不可选的几种方法
bluewhale的专栏
04-02 3340
让input不可选的几种方法   方法1: onfocus=this.blur()   方法2:readonly   方法3: disabled
html中input禁止输入(禁止获得焦点)多种方法及input限制数字和长度
热门推荐
boy火巨的博客
06-24 2万+
input禁止输入(禁止获得焦点) 1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。 <input type="text" value="禁止输入，可以使用Tab键切换到该字段" readonly="readonly"> 2：disabled 被禁用的 input 元素可复制，不能接收焦点...
设置文本框是只读
仰望者！
06-19 1669
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1: onfocus=this.blur() 方法2:readonly 方法3: disabled
element文本域选择框_Vue实现页面内容禁止选中功能,仅输入框和文本域可选_柠浓_前端开发者...
weixin_42620255的博客
12-29 555
上网上翻了翻，共找到两种方式*{-webkit-touch-callout:none; /*系统默认菜单被禁用*/-webkit-user-select:none; /*webkit浏览器*/-khtml-user-select:none; /*早期浏览器*/-moz-user-select:none;/*火狐*/-ms-user-select:none; /*IE10*/user-select:...
input禁止输入的4种方法
青茶
08-01 3385
input type="text" value="哈哈哈" disabled="disabled"> //只读不可复制，无法选择， 文字会变成灰色。<input type="text" value="哈哈哈" readonly="readonly"> //使用readonly，字段为只读可复制。<input type="text" value="哈哈哈" onfocus="this.blur();
input控件禁用事件
Xiark2015的博客
03-20 1807
<input id="sure-pass" style="color: red" onpaste="return false;" ondragenter = "return false;" ondrop="return false" ondragstart="return false" autocomplete="off"> ondragstart="return false" ...
使用css如何防止拖拽文本域？
最新发布
王铁柱666的博客
12-29 332
如果你想要更精细地控制拖拽行为，可能需要使用 JavaScript 来监听和处理拖拽事件。但是，对于大多数情况，上述 CSS 方法应该足够用来阻止用户拖拽文本域中的文本。然而，这个属性实际上是控制用户是否可以选择文本，而不是直接控制拖拽行为。在大多数情况下，禁止选择文本也会间接地阻止拖拽文本，因为用户通常需要先选择文本才能拖拽。例如，用户可能仍然能够拖拽文本域本身（而不是其中的文本），特别是如果文本域具有可拖拽的 CSS 属性（如。元素，使得用户无法选择或拖拽其中的文本。），你可以使用 CSS 的。
禁止文字选中的办法
多啦的博客
04-26 5416
禁止文字选中的办法
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值