js通过getElementsByClassName获取到的数组无法直接forEach遍历的解决办法以及禁止用户往输入框el-input里拖拽东西的解决办法

于 2023-12-28 16:24:57 发布
阅读量560 收藏 10
点赞数 9
分类专栏： JS实战记录 vue2实战记录 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37635012/article/details/135272480
版权

最近项目遇到一个问题，就是登录页面里，用户可以拖拽img的值到输入框里。如下图：
在这里插入图片描述
为了禁止用户往输入框里拖拽东西，我们先给三个输入框一个相同的类名myInput

   <el-input class="myInput" />

然后在mounted生命周期里，先通过getElementsByClassName获取三个dom,如下代码里usernameArr打印出来usernameArr不是个正常的数组，而是HTMLCollection这个类数组对象，通过Array.from将其转为真正的数组，然后就可以遍历了。我们在methods里封装了公共的禁止往输入框拖拽的方法dragInput

mounted()
了解本专栏 订阅专栏 解锁全文 超级会员免费看
百思不得小李
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
js遍历getElementsByClassName并取其某些内容拼接为数组
weixin_52475977的博客
09-17 1056
html内容： <div> <div class="danti"> <span>1.</span> <div class="content"> 内容1content <div> <div class="answer"> 内容1answer </div> </div> <div class="danti"> <span>2.</sp
js那些常用的遍历节点的方法
秋来九月八
12-08 1392
你可以编写递归函数来遍历 DOM 树的各个节点，访问它们的属性和执行操作。这些方法提供了多种方式来遍历 DOM 节点，你可以根据需要选择最适合你的方法。注意，一些方法可能返回文本节点等非元素节点，因此需要小心处理。在 JavaScript 中，遍历 DOM 节点（文档对象模型）的方法有多种。允许你通过 CSS 选择器选择特定的节点或一组节点。分别用于根据元素的 ID 和类名来获取节点。这些方法可以快速定位到特定节点。你可以使用这些属性来遍历父节点和子节点。属性可以访问节点的下一个兄弟节点和上一个兄弟节点。
js遍历JQuery和getElementsByClassName拿到的结果
JulyNight的博客
04-21 1142
Array.prototype.forEach.call(document.getElementsByClassName('类名'), function (element){ console.log(element) }); 或者 Array.prototype.forEach.call($('.类名'), function (element){ console.log(element) });
关于el-input的多行文本框textarea固定多行不可拖拽
seimeii的博客
06-10 8444
前端 +elementui
Element Plus设置input文本域组件不可鼠标拖拉高度
最新发布
m0_71349739的博客
12-07 696
input 禁止粘贴 禁止拖拽
Run the ant
01-05 3517
禁止粘贴： 禁止拖拽：
document.getElementsByClassName For IE
10-22 1849
IE 6 不支持 document.getElementsByClassName ，如下是模拟函数: function getElementsByClassName(classname){ var d=document; var e=d.getElementsByTagName('*'); var
如何禁止input粘贴输入和页面拖动输入
痞子杨
09-21 5327
onpaste是粘贴事件，ondragenter是拖拽事件<input type="text" name="name" onpaste="return false" ondragenter="return false" >
JS中getElementsByClassName与classList兼容性问题解决方案分析
10-16
主要介绍了JS中getElementsByClassName与classList兼容性问题解决方案,结合实例形式分析了getElementsByClassName与classList的使用方法、原理及兼容性问题的处理技巧,需要的朋友可以参考下
IE浏览器不支持getElementsByClassName的解决方法
09-04
主要介绍了IE浏览器不支持getElementsByClassName的解决方法,本文的方法比较完美的解决了这个问题,需要的朋友可以参考下
IE不支持getElementsByClassName最终完美解决方案
12-08
如果不支持，就在document对象里加入getElementsByClassName这个方法，这样的写法有一个好处，即不管有没有原生函数你都不用去修改代码。 通常先使用getElementsByTagName(“*”)取出文档中所有元素，然后进行遍历，...
js 获取class的元素的方法 以及创建方法getElementsByClassName
10-27
js 获取class的元素的方法 以及创建方法getElementsByClassName，需要的朋友可以参考一下
遍历getElementsByClassName
lianflower的博客
10-27 2600
https://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach var els = document.getElementsByClassName("myclass"); Array.prototype.forEach.call(els, function(el) { console.log(el.tagName); });
JS 元素遍历
老狼的专栏
03-28 5161
1、循环遍历从getElementsByClassName返回的所有元素 var elements = document.getElementsByClassName('classname'); Array.prototype.forEach.call(elements, function (element) { console.log(element.innerHTML); }); ...
el-input,禁止粘贴, 禁止拖拽输入
J_mine的博客
08-13 2578
原理分析 流览器的 事件传递机制是 (先捕获,后冒泡)的过程 , 粘贴的时候会先执行绑定在外层div上的paste事件捕获方法, 然后再到内层的input, 因此可以在组件上捕获监听paste事件, 并阻止向下传播即可 代码如下 <el-input v-model="input" placeholder="请输入内容" @paste.native.capture.prevent="inputPress"> </el-input> methods...
js中使用getElementsByClassName获取class对象
实际工作与学习当中的随记
08-09 6477
前端开发一般不需要过多考虑性能问题，但你想在性能上追求极致的话，一定要知道jQuery性能很差。所以js之前没做getElementByClassName也是出于严谨的考虑，现在document.getElementsByClassName返回数组应该也是出于严谨的考虑。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。......
获取元素节点，遍历树
weixin_43641912的博客
04-24 144
nextElementSibling 返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点） previousElementSibling IE9及以下不支持。获取属性节点 getAttributeNode(),对于属性节点来说，用value和nodeValue都能获取。nodeValue 属性节点、注释节点、文本节点都有相应的nodeValue。寻找子元素结合chileNodes封装,只返回元素节点，过滤了其他的节点。hasChildNodes()判断元素是否有子节点,换行也有文本节点。
小白必看-------原生JS解决getElementsByClassName兼容问题
qq_31232201的博客
08-22 339
原生JS解决getElementsByClassName兼容问题 //通过自定义函数实现获取类名（不适合多个类名） function getElementsByClassName(node,classname){ if(node.getElementsByClassName){ return node.getElementsByClassName(classname); }...
Vue项目里Websocket的使用
热门推荐
qq_37635012的博客
10-08 2万+
由于项目需求有要使用长链接，我们普通的http请求如果用轮询的方式与服务端通讯就很消耗资源。我们一起来学习一下在vue项目里如何使用websocket,本文纯属个人观点，如果有不正确的地方请大家批评指正，技术无高低，谦虚学习的心态我认为很重要，天外有天人外有人。
document.getElementsByClassName('el-input__inner')[1].value 的方法输入vue的输入框，但是校验为空
06-17
这个问题需要更多的上下文才能回答。从代码片段来看，你正在使用JavaScript获取Vue中的输入框并尝试设置其值，但校验失败。这可能是因为你设置的值不符合输入框的校验规则，或者因为你没有正确触发输入框的校验。建议你在设置值后手动触发输入框的校验，并检查校验失败的具体原因。你可以在Vue文档中查找更多关于Vue校验规则和校验方法的信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值