Bootstrap 5模态框data-bs传参后密码输入框无法赋值问题咨询

核心故障原因 #

你使用editpass.querySelector('.modal-body input')获取元素时，该选择器会优先匹配模态框body内的第一个input元素，也就是<input type="hidden" name="action" value="update_password">隐藏域。你实际已经把pw值成功赋值给了这个不可见的隐藏输入框，所以目标密码输入框没有展示值，控制台也不会报任何错误。

修复代码 #

直接用ID选择器精准定位目标元素即可，同时可以直接补充你需要的隐藏域赋值逻辑，修改后的JS事件监听代码如下：

var editpass = document.getElementById('editpass')
editpass.addEventListener('show.bs.modal', function (event) {
  var button = event.relatedTarget
  var hostname = button.getAttribute('data-bs-hostname')
  var id = button.getAttribute('data-bs-id')
  var cid = button.getAttribute('data-bs-cid')
  var category = button.getAttribute('data-bs-category')
  var username = button.getAttribute('data-bs-username')
  var pw = button.getAttribute('data-bs-pw')

  var modalTitle = editpass.querySelector('.modal-title')
  var modalUsername = editpass.querySelector('.modal-username')
  var modalCategory = editpass.querySelector('.modal-category')
  // 用ID精准定位所有需要赋值的输入框
  var modalPw = document.getElementById('password')
  var modalIdInput = document.getElementById('id')
  var modalUsernameInput = document.getElementById('username')
  var modalCidInput = document.getElementById('cid')

  modalTitle.textContent = 'Editing passwords for ' + hostname
  modalUsername.textContent = 'Apply to all with username ' + username
  modalCategory.textContent = 'Apply to all in category ' + category
  // 批量赋值
  modalPw.value = pw
  modalIdInput.value = id
  modalUsernameInput.value = username
  modalCidInput.value = cid
})

可选验证步骤 #

如果修改后仍有异常，可按以下顺序排查：

• 在事件监听代码中加入日志打印，确认元素选择正确：console.log(modalPw)，核对输出的元素ID是否为password
• 检查页面内是否有多个id为password的元素，保证id全局唯一
• 打印console.log(pw)确认data-bs-pw属性值解析正常

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