首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取动态input的id

在JavaScript中获取动态生成的input元素的id,可以通过多种方法实现,具体取决于你的HTML结构和动态生成元素的方式。以下是一些常见的方法和示例代码:

1. 使用document.getElementById()

如果你知道具体的id,可以直接使用document.getElementById()来获取元素。

代码语言:txt
复制
let inputElement = document.getElementById('dynamicInputId');
console.log(inputElement.id);

2. 使用document.querySelector()

如果你想通过其他选择器(如类名、属性等)来获取元素,可以使用document.querySelector()

代码语言:txt
复制
let inputElement = document.querySelector('.dynamicInputClass');
console.log(inputElement.id);

3. 使用事件委托

如果你有多个动态生成的input元素,并且想要在某个事件(如点击)发生时获取它们的id,可以使用事件委托。

代码语言:txt
复制
<div id="inputContainer">
  <!-- 动态生成的input元素将被添加到这里 -->
</div>
代码语言:txt
复制
document.getElementById('inputContainer').addEventListener('click', function(event) {
  if (event.target.tagName === 'INPUT') {
    console.log(event.target.id);
  }
});

4. 在生成元素时存储id

如果你在JavaScript中动态生成input元素,可以在生成时直接获取或设置id

代码语言:txt
复制
let dynamicId = 'input_' + Date.now(); // 生成一个唯一的id
let inputElement = document.createElement('input');
inputElement.id = dynamicId;
document.getElementById('inputContainer').appendChild(inputElement);

console.log(dynamicId); // 输出新生成的input元素的id

5. 使用getElementsByTagNamegetElementsByClassName

如果你有多个动态生成的input元素,并且它们有相同的类名,可以使用这些方法来获取所有元素,然后遍历它们。

代码语言:txt
复制
let inputElements = document.getElementsByClassName('dynamicInputClass');
for (let i = 0; i < inputElements.length; i++) {
  console.log(inputElements[i].id);
}

应用场景

  • 表单处理:在处理用户提交的表单时,可能需要获取特定input元素的id来进行数据验证或处理。
  • 动态UI交互:在动态生成的UI组件中,可能需要根据用户的交互来获取特定元素的id
  • 事件处理:在事件委托中,获取触发事件的元素的id以便进行相应的处理。

注意事项

  • 确保在DOM完全加载后再执行获取元素的操作,可以使用DOMContentLoaded事件或在<body>标签的底部放置脚本。
  • 动态生成的id应该是唯一的,以避免冲突和错误。

通过以上方法,你可以根据具体的需求和场景选择合适的方式来获取动态生成的input元素的id

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

input获取焦点 原生js_原生js的input事件

1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点再失去焦点的时候才会触发该事件,用于判断标签为空。...3.onchange 当input失去焦点并且它的value值发生变化时触发,个人感觉可以用于注册时的确认密码。...主要是用于 input type=button,input作为一个按钮使用时的鼠标点击事件 7.onselect 当input里的内容文本被选中后执行,只要选择了就会触发,不是全部选中 8.oninput...当input的value值发生变化时就会触发,(与onchange的区别是不用等到失去焦点就可以触发了) 使用方法: 以上事件可以直接放到input的属性里,例如: 1 , 可以通过js给input...dom元素添加相应的事件, 2 document.getElementByTagName(‘input’).onfocus = function(); 3 事件监听。

25.8K60

JS实现动态获取当前点击事件的id属性值

整个页面是通过ajax请求最新的4部视频进行填充完成,视频列表又是通过template-web.js插件补上去的,所以导致所有ID值都是一样的,一开始给按钮添加一个事件,结果是所有播放按钮都是播放第一个视频...于是,想了好多办法,又把ID属性给弄成动态的ajax请求的属性值,实现了每个id不一样,接下来,因为点击播放要调用一个方法,进行解析视频播放,拼接成API+视频链接的格式在新打开的弹窗进行展示。...具体可以看下图: 要实现点击不同按钮,并且按钮ID是动态从ajax请求获取的,还要添加点击视频拼接视频链接,参考了文章,可以获取点击按钮的id值,然后使用button,将链接放在value中 Dom...对象的id属性可以获取元素的id值。...-- HTML结构 --> id="testid" type="button" onclick="play(this)" value="动态获取id值">播放 // javascript

25.9K20
  • js 动态生成 input 的绑定事件 blur 无效

    ,而针对于其中的input标签,要求设置失去焦点的blur事件 需要实现的界面截图如下: ?...最开始编写的 js 代码如下: /** * 当sku库存量变化时,对应总库存进行更新 */ $(".input-sku-stock").blur(function ()...; 但是发现,静态的表格是可以正常实现的,而动态新生成的却无法触发blur事件 因为测试失败后,转而考虑新的写法,且可以正常实现 ?...ி 附录 1.针对我的问题,求助度娘,发现了下面的一个帖子,可作参考 动态添加的blur事件失效 [问题点数:60分,结帖人lawrendc] 时间相当久远... 2.最接近解决需求的文章如下...,建议可自行测试 动态生成input绑定事件无效如:blur 意见:异步导致绑定事件失败,需使用全局绑定事件 3.w3school 文档 - onblur 事件 这就是官方文档

    8.9K00

    js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交

    一、在动态上传章节信息时,碰到了一系列的问题,主要有: 1、动态添加的input元素绑定的事件失效了。 2、提交保存时,多个name相同的表单如何判空并阻断提交。...二、问题界面展示: (1)在这个页面中,第一个form表单,是开始就有了,第二个是点击按钮后动态添加的,它的判断是否为空是无效的。...开始写的时候这样写,结果就出现了刚才所遇到的问题。新增的input表单事件无效。...,是因为在事件加载之后我们才动态添加元素,新的元素并没有绑定到曾经的事件。...js,比如添加的表单,不需要可以点击×号删除,要想实现效果,但不知道怎么做的时候,我们可以自己写点击事件,不用框架的,因为我们无法把握人家的js,这只是本人的一种思路,会的不用理会。

    6K20

    js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法: 1. 使用原生JS获取: CSS代码:给 div 一个内边距,按钮设置样式。...     input type="file" name="myfile" id="myfile" value=""/>     id="mybtn"...>点击 id="div"> JS代码:点击 button 按钮时触发事件,如果未选择任何文件会返回 undefined ,如果已选择文件 则返回文件名和扩展名...使用 jQuery 获取: CSS 和 HTML 部分代码没变,js 代码如下:我这次使用的是监听 input 的 change 事件,button 按钮可以删掉。...声明:本文由w3h5原创,转载请注明出处:《js获取input上传文件的文件名和扩展名的方法》 https://www.w3h5.com/post/89.html

    13.5K00

    Mybatis获取自增长的主键id

    ,所以完全可以获取到用户的userId,但是现在是要在创建的时候就分配,又因为我们的userId是在数据库中设置的自动增长,所以前端传给我们的user对象里面是不包含userId的....所以对于如何取得自增长的Id就比较麻烦.查阅资料后发现,还是有办法解决的.而且有两种方法,这里都分享给大家,并且我自己也都测试了,的确可用. 2.解决方案 2.1方案一 这段代码加在你的insert语句中...,after,这两个值分别表示一个是在执行插入操作之前再取出主键id,一个是执行插入操作之后再取出主键Id.前者使用与自己定义的自增长规则的id,后者就是用与我们的情况即自增长的id 小栗子: 的userId,数据也成功插入了. 2.2方案二 id="insertSelective" parameterType="请求对象" useGeneratedKeys... 同样的这里的keyProperty也和上述的注意点一样 小栗子: id="insertSelective" parameterType="ams.web.admin.entity.UserDao

    3.4K20
    领券