如何获取HTML中div标签嵌套的input输入框的用户输入内容

你可以通过「事件监听+读取输入框value属性」的方式拿到用户输入的内容，分原生JS和jQuery两种常用场景实现：

原生JavaScript实现（无需引入额外库） #

input事件会在输入框内容发生变化时实时触发，能覆盖键盘输入、右键粘贴/剪切、输入法联想、表单自动填充等所有输入场景，比键盘事件更可靠：

// 定位目标输入框：因为父div的id是数字开头，CSS选择器需要做转义
const inputEle = document.querySelector('#\\31 input[type="text"]');
// 如果你觉得id转义麻烦，也可以用class定位父元素：
// const inputEle = document.querySelector('.grid-item input[type="text"]');

// 绑定输入监听
inputEle.addEventListener('input', function(e) {
  // 这里的userInput就是用户当前输入的完整内容
  const userInput = e.target.value;
  // 后续写你自己的业务逻辑即可，比如打印、校验、提交等
  console.log('用户输入内容：', userInput);
})

如果你不需要实时获取内容，只想在特定时机（比如点击提交按钮时）拿一次值，不用绑定事件，直接读取value即可：

// 指定时机直接读取
const userInput = document.querySelector('.grid-item input[type="text"]').value;

jQuery实现（项目已引入jQuery的场景） #

写法更简洁：

// 实时监听输入
$('.grid-item input[type="text"]').on('input', function() {
  const userInput = $(this).val();
  // 自定义业务逻辑
  console.log('用户输入内容：', userInput);
})

// 指定时机单次获取
const userInput = $('.grid-item input[type="text"]').val();

注意事项 #

• 不要用keydown/keyup/keypress这类键盘事件监听输入，这类事件只能捕获键盘操作，遇到右键粘贴、自动填充、软键盘输入等场景时会出现值获取不全、获取不及时的问题。
• 如果你页面里有多个class为grid-item的元素，建议给目标输入框加个单独的id或者专属class，避免选到其他输入框。

内容的提问来源于stack exchange，提问作者manjunath