uniapp h5使用原生的input标签

最新推荐文章于 2025-03-13 11:56:32 发布

yunchong_zhao

最新推荐文章于 2025-03-13 11:56:32 发布

阅读量2.2k

点赞数 1

分类专栏：前端 uniapp javascript 文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/126508040

版权

javascript 同时被 3 个专栏收录

346 篇文章

订阅专栏

前端

342 篇文章

订阅专栏

uniapp

23 篇文章

订阅专栏

在uniapp开发过程中，遇到input标签被二次封装的问题，导致无法直接设置类名和id。本文提出通过动态创建原生input标签并利用JavaScript操作DOM来解决这一问题。虽然无法阻止编译过程，但通过原生DOM方法可以实现大部分需求，如设置id和class。此外，还分享了一种查找并修改uni-app内嵌input标签属性的方法。uniapp尽管有此小困扰，但整体上仍是一款优秀的前端框架。

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

其实在uniapp中我们编译h5平台的时候，会发生我们使用input标签都会被二次封装，我们想给这个input原生标签加的类名和id都会加到最外层的包括的uni-input自定义标签上
在这里插入图片描述
有没有什么方法能防止它被转义呢，目前好像没有有点难受，呢

但是我们可以通过其他的方式

自己动态创建原生的input标签添加进去

let input = document.createElement('input')
input.type = "text"
input.className = "test"
input.id = "test"
input.placeholder = "请输入密码"
document.getElementById('test').appendChild(input)

就是我们根据选择找到这个input标签其实还有一个固定规律呢我们给
就是里面的input和外层uni自定义标签一直有一个固定的嵌套规律
找到之后使用原生的方法进行属性的添加，其实大多数都能完成我们任务

// uniapp
<input id="test" />
// js
document
      .querySelector("#test")
      .children[0].children[1].setAttribute("id", "test");

我看有人问过为啥不加个什么属性，放置进行编译，好像人家说那样做的话表现的和文档就有所不同了所以才不那样做。

总体上来说 uniapp 还是很不错的

关注我持续更新前端知识。